Включить элемент droppable для принятия перетаскиваемых объектов, только когда он пуст

Question

В этом jsFiddle У меня возникает одна проблема. Позвольте мне описать

Когда я перетаскиваю любой элемент, содержащий «N» на другой, <td> работает хорошо. Но после этого, когда я пытаюсь перетащить любой элемент в его исходное положение, он не работает.

Мое ожидание: Когда какой-либо элемент перемещается в другое место, тогда старое место должно допускать прием другого элемента.

Ниже приводится код:

$(function() { 
    $(".dragDiv").draggable({ 
    create: function() { 
     $(this).data('position', $(this).position()) 
    }, 
    revert: 'invalid', 
    stop: function() { 
     $(this).draggable('option', 'revert', 'invalid'); 
    } 
    }); 
    $('.dragDiv').droppable({ 
    greedy: true, 
    tolerance: 'touch', 
    drop: function (event, ui) { 
     ui.draggable.draggable('option', 'revert', true); 
    } 
    }); 
    $(".mainTable tr td").droppable({ 
    drop: function (event, ui) { 
     console.log(JSON.stringify($(this).attr('id'))); 
     console.log(JSON.stringify(ui.draggable.attr("id"))); 
     snapToMiddle(ui.draggable, $(this)); 
    }, 
    accept: function() { 
     return $(this).find("*").length == 0; 
    } 
    }); 
}); 
function snapToMiddle(dragger, target) { 
    var topMove = target.position().top - dragger.data('position').top + (target.outerHeight(true) - dragger.outerHeight(true))/2; 
    var leftMove = target.position().left - dragger.data('position').left + (target.outerWidth(true) - dragger.outerWidth(true))/2; 
    dragger.animate({ 
    top: topMove, 
    left: leftMove 
    }, { 
    duration: 100, 
    easing: 'easeOutBack' 
    }); 
} 

Answer 1

Проблема заключается в том, что JQuery UI перетаскивать виджет фактически не добавляет элемент в сбрасываемой на капли, просто манипулирует свойства позиционирования CSS, следовательно, $(this).find("*").length == 0; будет ложным, даже если элемент отбрасывается в другой droppable.

Вы можете исправить это, добавив перетаскиваемый вручную.

Кроме того, вы можете использовать способ утилиты position(), чтобы легко перемещать перетаскиваемый относительно droppable.

---

$(function() { 
 
    $(".dragDiv").draggable({ 
 
    revert: 'invalid' 
 
    }); 
 
    $(".mainTable tr td").droppable({ 
 
    accept: function() { 
 
     return $(this).find("*").length == 0; 
 
    }, 
 
    drop: function(event, ui) { 
 
     var $this = $(this); 
 
     $this.append(ui.draggable.css({ 
 
     /* manually append the element 
 
       and reset positioning */ 
 
     top: 0, 
 
     left: 0 
 
     })); 
 
     ui.draggable.position({ 
 
     my: "center", 
 
     at: "center", 
 
     of: $this, 
 
     using: function(pos) { 
 
      $(this).animate(pos, 100, "easeOutBack"); 
 
     } 
 
     }); 
 
    } 
 
    }); 
 
});

.mainTable { 
 
    margin: 20px auto; 
 
    padding: 0px; 
 
} 
 
.mainTable tr td { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.dragDiv { 
 
    text-align: center; 
 
    background-color: #00ABA9; 
 
    height: 50px; 
 
    vertical-align: middle; 
 
    margin: auto; 
 
    position: relative; 
 
    width: 50%; 
 
}

<link href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
 
<table border="1" class="mainTable"> 
 
    <tr> 
 
    <td id="11"> 
 
     <div class="dragDiv" id="1">N</div> 
 
    </td> 
 
    <td id="12">&nbsp;</td> 
 
    <td id="13">&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td id="21">&nbsp;</td> 
 
    <td id="22"> 
 
     <div class="dragDiv" id="2">N</div> 
 
    </td> 
 
    <td id="23">&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td id="31">&nbsp;</td> 
 
    <td id="32">&nbsp;</td> 
 
    <td id="33"> 
 
     <div class="dragDiv" id="3">N</div> 
 
    </td> 
 
    </tr> 
 
</table>