拖放 Jquery - 离开网格时删除 Draggable答案

【问题标题】：Drag and Drop Jquery - Removing Draggable when it leaves grid拖放 Jquery - 离开网格时删除 Draggable
【发布时间】：2015-12-21 03:42:19
【问题描述】：

编辑：

有谁知道当可拖动区域越过它时如何修复可放置区域的闪烁？查看单击网格时会发生什么，然后将栅栏块拖到网格上方的段落上方。如果我能解决这个问题，那将是解决我的整个问题的方法..（一种在离开指定的不可放置 div 时使可拖动消失的方法）。

我正在使用 jquery 拖放。我有一个栅栏可以继续使用的网格。请参阅[编辑]/dragndrop/3.html。如果单击正方形的边界，则会出现栅栏。如果您将网格外的栅栏块拖到指定的可放置区域（它们位于网格的左右边缘），我有一个函数可以删除它们。

我希望 Draggable 片段在离开网格时消失，而不必使用可放置区域。现在，只有当我将布局的其他部分设为可拖放时，它们才会消失，然后一旦将可拖动项目拖放到网格外的可拖放区域中，它们就会对它们执行某些操作。在大多数情况下，人们在离开“可拖放”区域时会使可拖动项目消失。这样做的问题是，每次拖动鼠标移动到网格上的一个新的可放置方块时，它都会注册为离开可放置区域。

考虑到这些问题，如果可拖动项目离开指定的 div，我需要一种方法来完全删除它。这个指定的 div 不需要是可放置的。现在作为一种解决方法，我在网格的左右边缘设置了可放置区域。

      $( ".droppable" ).droppable({
        hoverClass: "ui-state-hover",
        drop: function( event, ui ) {
            droppable = true;
            if(original){
                 var newDiv = $(ui.draggable);
                 //var newDiv = $(ui.draggable).clone();

                 newDiv.draggable({
                    stop: function( event, ui ) {
                        if(!droppable)
                            ui.helper.remove();
                    },
                    start: function( event, ui ) {
                        droppable = false;   
                    },
     });



    if  ($(this).hasClass('noHover')   )  {
         $(newDiv).remove();
    } 
     */

     //console.log('here we are' + $(this) );

    if  ($(this).hasClass('noHover')   )  {
         $(newDiv).remove();
    }

    if (!$(this).hasClass("col-xs-2 col-sm-2")) {
        //console.log('here we are' + $(this).text());
        $(this).removeClass('ui-state-hover');
        console.log(  $(this) ) 
        $(newDiv).remove();
        $(newDiv).css("display", "none");
    }
    /*

【问题讨论】：

标签： javascript jquery

【解决方案1】：

通过删除默认 UI 悬停并添加我自己的悬停类来解决闪烁的 div 问题（由 ui hover css 中的某些内容引起），通过解决方法修复了它。当它离开可放置区域时，我没有删除可拖动，而是将页面的其余部分设为可放置，因此您可以简单地将栅栏件从网格中滑出并将它们放在任何地方，然后我有一个删除它们的功能。

【讨论】：