Jquery UI droppable inside bootstrap columns -


using jquery ui, i'm trying drag elements , drop them inside bootstrap columns. simple idea doesn't work, may try yourself:

http://jsfiddle.net/r4rp93ac/1/

it drops inside first bootstrap column

i found related questions:

bootstrap 3 column class interfering jquery-ui droppable div

jquery ui draggable bootstrap layout

and tried add

 .ui-draggable-handle {      z-index: 1;  }   .ui-draggable-dragging {      z-index: 10000!important  } 

to css, doesn't help.

id should unique, if wan 2 droppable zones, use class instead:

<div id="droppable2" class="droppable col-xs-3">     <p>drop         <br>here</p> </div> <div id="droppable2" class="droppable col-xs-3">     <p>drop         <br>here</p> </div> 

and

$(".droppable").droppable({     drop: function (event, ui) {         $(this).find("p").html("dropped!");     } }); 

working demo


Comments

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -