Making a dynamically added element as sortable handle in jQuery

Question

I have the following code. On hover of a div I'm adding a button and want to make that button as drag handle. But for some reason, the drag does not seem to work. What am I doing wrong?

$(document).ready(function() {
  var active = 0;
  jQuery(document).on("mouseover", ".mfx-container", function(e) {
    if (active == 0) {
      active = 1;
      jQuery(".mfx-container").css("outline", "none");
      jQuery(this).css("outline", "2px solid #DDE5EC");
      jQuery(".editor-hover-buttons").remove();
      jQuery(this).append('<button class="editor-hover-buttons move-button" type="reset">Move</button>');

      jQuery(".mfx-wrapper").sortable({
        handle: ".move-button"
      });


    }
  })
  jQuery(document).on("mouseout", ".mfx-container", function(e) {
    if (active == 1) {
      active = 0;
    }
  })




})

.mfx-container {
  min-height: 100px;
  position: relative;
}
.delete-block-button {
  position: absolute;
  top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="mfx-wrapper">
  <div class="container-fluid mf-wpt1-banner mfx-container">
    <span class="strong"> Introducing Marketfox!</span> You can now increase conversions on any web page
  </div>
  <div class="container mfx-container">
    <h2 class="text-center mt30 mb30">Lorem ipsum dolor sit amet</h2>
    <div class="col-sm-6 lh2 mb30">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum magna turpis. Aliquam ultricies interdum risus, ut interdum justo imperdiet eget.
    </div>
    <div class="col-sm-6 lh2 mb30">
      Vivamus in placerat odio. Mauris nec augue vitae est facilisis tincidunt. Donec quis commodo mi, quis porta magna. Sed laoreet id lectus ac interdum.
    </div>
    <div class="col-sm-6 lh2 mb30">
      Vivamus in placerat odio. Mauris nec augue vitae est facilisis tincidunt. Donec quis commodo mi, quis porta magna. Sed laoreet id lectus ac interdum.
    </div>
    <div class="col-sm-6 lh2 mb30">
      Vivamus in placerat odio. Mauris nec augue vitae est facilisis tincidunt. Donec quis commodo mi, quis porta magna. Sed laoreet id lectus ac interdum.
    </div>

  </div>

  <div class="container mfx-container">
    <div class="col-sm-4 p30">
      <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
    </div>
    <div class="col-sm-4 p30">
      <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
    </div>
    <div class="col-sm-4 p30">
      <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
    </div>
  </div>
</div>

Your button has class `move-button` and your handle is `move-block-button`? — gpgekko, Feb 15 '17 at 12:57
Possible duplicate of [Jquery UI sortable, button is not working as handle](http://stackoverflow.com/questions/12142827/jquery-ui-sortable-button-is-not-working-as-handle) — Shiran Dror, Feb 15 '17 at 13:37

score 1 · Accepted Answer · answered Feb 15 '17 at 13:12

1

First, as gpgekko pointed out, move-block-button is very likely to be a typo of move-button.

Secondly, jQuery UI sortable doesn't seem to work with button as its handle.

If you change button to div then it works. See http://jsbin.com/kiyozutodo/edit?html,js,output for a demo of this.

answered Feb 15 '17 at 13:12

axial sandal

81
2

you can use a button as handle if you add `cancel: ''` to the sortable call – Shiran Dror Feb 15 '17 at 13:36

Making a dynamically added element as sortable handle in jQuery

1 Answers1