Question

编辑：

有人知道如何在可拖动区域上方修复可投放区域的闪烁吗？查看单击网格时发生的情况，并将栅格块拖动到网格上方的段落上方。如果我可以解决这个问题，那将是一个解决我整个问题的工作..（一种在离开指定的不可丢弃的div时使可拖动的消失的方法）。

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

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

考虑到这些问题，我需要一种方法来完全删除可拖动项目，如果它离开指定的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");
    }
    /*

Answer 1

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

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

1 个答案: