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> 

Answer 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.