drappable 요소가 비어있는 경우에만 draggables를 허용하도록 설정합니다.

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에 놓입니다.

수동으로 draggable을 droppable에 추가하여이 문제를 해결할 수 있습니다.

또한 position() 유틸리티 메소드를 사용하여 drappable을 상대적으로 가운데에 놓을 수 있습니다.

---

$(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>