javascript - 在 2 个框之间移动元素

Question

我已经查看了关于这个主题的相同问题，但不知何故建议的解决方案对我不起作用:/

问题是 div 只从#box1 移动到#box2 一次。如果使用 detach() 则 div 在 #box2 中是可点击的，但在点击时会重新排列。如果 remove()used div 在 #box2 中根本不可点击(事件监听器消失了？)。我有一种感觉，移动 div 的过程在某种程度上并不真正完整，而且我在 DOM 中有重复项，或者移动的 div 完全消失并且不对点击使用react。

我尝试了各种组合的 detach()、remove() 和 appendTo()，我能得到的最好的是在下面的 fiddle 中

http://jsfiddle.net/uoz3t914/13/

$('#box1 .item' ).on('click', function() {
 // $( this ).detach().appendTo('#box2'); moves divs around in #box2
 $( this ).remove().appendTo('#box2');
});

$('#box2 .item' ).on('click', function() {
 // $( this ).detach().appendTo('#box2'); moves divs around in #box2
 $( this ).appendTo('#box1');
});

Answer 1

在您的情况下，您必须使用 Event Delegation

$('#box1' ).off().on('click','.item', function() {
     // $( this ).detach().appendTo('#box2'); moves divs around in #box2
     $( this ).appendTo('#box2');
});

$('#box2' ).off().on('click', '.item', function() {
     // $( this ).detach().appendTo('#box2'); moves divs around in #box2
     $( this ).appendTo('#box1');
});

您将事件附加到父级，父级将其传播到子级，然后在附加事件的任何时候，放置一个 off() 将其分离。

$('#box1' ).off().on('click','.item', function() {
     // $( this ).detach().appendTo('#box2'); moves divs around in #box2
     $( this ).appendTo('#box2');
});

$('#box2' ).off().on('click', '.item', function() {
     // $( this ).detach().appendTo('#box2'); moves divs around in #box2
     $( this ).appendTo('#box1');
});

.item {
 
    width: 50px;
    height: 50px;
    float: left;
}

#box1 {
    border: 1px dotted blue;
    position: relative;
    width: 200px;
    height: 100px;
}

#i1 {
     background-color: yellow;     
}

#i2 {
    background-color: green;
       
}

#i3 {
    background-color: red;  
    
}

#box2{
    border: 1px solid black;
    width: 250px;
    height: 100px;
    position: relative;
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id ="box1">
    <div class ="item" id ="i1"></div>
    <div class ="item" id ="i2"></div>
    <div class ="item" id ="i3"></div>
</div>

<div id = "box2">
    
</div>