如何当mCustomScrollbar启用

林拖动的元素从一个div来对其他元素拖到外面的同时拖动元素不可见如何当mCustomScrollbar启用

我用jQuery的mCustomScrollbar插件，滚动

HTML代码

<table><tr> 
    <td><div id="ParentDiv" class="mCustomScrollbar _mCS_4 ui-sortable ui-droppable"></div></td> 
<td><div style="border:1px solid blue;float:left;margin-top:0px;" class="drop">DROP HERE 
    </div></td></tr> 
    </table>

jQuery代码

for (var i = 0; i < 100; i++) { 
    var el = "<div class='childDiv draggable'>iData " + i + "</div>"; 
    $("#ParentDiv").append(el); 
} 

$(".draggable").draggable({ 
    containment: "window", 
    cursor: "crosshair", 
    revert: "invalid", 
    scroll: true, 
    stop: function (event, ui) { 
     if ($(this).hasClass("tsh")) { 
      $(this).attr("style", ""); 

     } 
    }, 
    drag: function (event, ui) { 
     var offset = $(this).offset(); 
     var xPos = offset.left; 
     var yPos = offset.top; 
     // $(this).text('x: ' + xPos + 'y: ' + yPos); 
     var shw_xy = 'x: ' + xPos + 'y: ' + yPos; 
     console.log(shw_xy); 


    } 

}); 
$(".drop").droppable({ 
    accept: ".draggable", 
    activeClass: "myhighlight", 
    drop: function (event, ui) { 
$(this).removeClass("border").removeClass("over"); 
        //$(this).addClass("over"); 
        var dropped = ui.draggable; 
        var droppedOn = $(this); 


        $(dropped).detach().css({ 
         top: 0, 
         left: 0 
        }).appendTo(droppedOn); 
    }, 
    over: function (event, elem) { 
     $(this).addClass("over"); 
     $(this).removeClass("img_added"); 

     var $this = $(this); 

     console.log("over"); 

    }, 
    activate: function (event, elem) { 

    } 
});

CSS

#ParentDiv { 
    background-color: #ffffff; 
    border: 1px solid #e1d193; 
    border-radius: 4px; 
    float: left; 
    height: 600px; 
    margin-bottom: 10px; 
    margin-left: 15px; 
    min-height: 200px; 

    padding-bottom: 20px; 
    padding-left: 23px; 
    padding-top: 20px; 
    width: 252px; 
} 
#ParentDiv .childDiv { 
    border:1px solid red; 
    border-radius: 4px; 
    height: auto; 
    margin: 2px; 
    position: relative; 
    z-index: 5000; 
} 
#ParentDiv .childDiv { 
    float: left; 
    height: auto; 
    width: 70px; 
} 
.childDiv { 
    border:1px solid green; 
    border-radius: 4px; 
    height: auto; 
    margin: 2px; 
    position: relative; 
    z-index: 5000; 
} 
.childDiv { 
    float: left; 
    height: auto; 
    width: 70px; 
    margin:2px; 
}

任何一个可以建议我在哪里，我错

来源

2016-03-31 Prasad V S

请使用助手：“克隆”与appendTo功能。检查下面的代码。

$(".element").draggable({ 
    helper: function() { return $ 
     (this).clone().appendTo(".element").css("zIndex",2).show(); 
    } 
});

来源

2016-10-14 10:57:22

我提到，拖动元素的容器已隐藏溢出。这就是为什么你不能看到拖动元素。只需设置overfolow可见拖就开始和回隐藏在拖动结束：

stop: function (event, ui) { 
     $(".mCustomScrollBox").attr("style", "overflow: hidden !important;"); 
    $(".mCSB_container").attr("style", "overflow: hidden !important;"); 
}, 
start: function(event,ui){ 
    $(".mCustomScrollBox ").attr("style", "overflow: visible !important;"); 
    $(".mCSB_container").attr("style", "overflow: visible !important;"); 
},

在这里看到它是如何工作的：

http://jsfiddle.net/jt1c8o81/19/

来源

2016-03-31 13:43:55 alexey

拖放mCustomScrollbar不起作用。请检查一次 –

如何当mCustomScrollbar启用

回答

相关问题