在父div之外拖动时隐藏的元素

时间:2016-08-17 07:14:04

标签: jquery jquery-ui jquery-ui-draggable

我正在尝试将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');
    }
});

在父容器外拖动时会隐藏它。我需要添加任何选项吗?

谢谢!

0 个答案:

没有答案