我正在尝试将draggable属性添加到光滑js容器内的元素,但不会将其拖到父容器之外。下面是示例html代码:
<div id="slider-slick-head-div">
<div class="slick-responsive slick-initialized slick-slider">
<div class="slick-list draggable" tabindex="0">
<div class="slick-track" style="opacity: 1; width: 1185px; transform: translate3d(0px, 0px, 0px);">
<div class="slick-slide draggable-element slick-active ui-draggable ui-draggable-handle" index="0" style="width: 237px;">
<div class="section" id="row_toggle_radio">
<label for="toggle_radio" class="field-label">
<h6 class="text-info mn">Radio Button </h6>
</label>
<label class="field ">
<div id="toggle_radio_menu" class="btn-group" data-toggle="buttons">
<label class="btn btn-system " for="toggle_radio">
<input type="radio" id="toggle_radio_0" autocomplete="off" name="toggle_radio" value="Mr"> Mr.</label>
<label class="btn btn-system " for="toggle_radio">
<input type="radio" id="toggle_radio_1" autocomplete="off" name="toggle_radio" value="Ms"> Ms.</label>
</div>
</label>
</div>
</div>
</div>
</div>
</div>
掉落区域:
<div id="inb_element_dropped_holder"> </div>
使用简单的JS代码:
$('*[draggable!=true]','.slick-track').unbind('dragstart');
$( ".draggable-element" ).draggable({
containment: $('document'),
revert: 'invalid',
scroll: false,
helper: 'clone',
});
$(".draggable-element").on("draggable mouseenter mousedown",function(event){
event.stopPropagation();
});
$("#inb_element_dropped_holder").droppable({
accept: '.draggable-element',
drop: function(event, ui) {
console.log('test');
}
});
在父容器外拖动时会隐藏它。我需要添加任何选项吗?
谢谢!