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!"); } });
Comments
Post a Comment