Javascript 在两个盒子之间移动元素

我已经研究了关于这个主题的相同问题，但不知何故，建议的解决方案并不适合我：/

---

问题是div只能从#box1移动到#box2一次。如果使用了detach（），则可以在#框2中单击div，但单击时会重新排列div。如果在#框2中无法单击remove（）使用的div（事件侦听器消失了？）。我有一种感觉，移动div的过程在某种程度上并没有真正完成，我在DOM中看到了重复的div，或者移动的div完全消失了，对单击没有反应

我尝试了各种组合的detach（）、remove（）和appendTo（），我能得到的最好结果就是下面的小提琴

---

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

将事件附加到父级，然后将其传播到子级，然后在附加事件的任何时候，放置一个

off（）

将其分离

$（'#box1'）.off（）.on（'click'，'.item'，function（））{
//$（this.detach（）.appendTo（“#box2”）；在#box2中移动div
$（this）.appendTo（“#box2”）；
});
$（'#box2'）.off（）.on（'单击'，'.item'，函数（））{
//$（this.detach（）.appendTo（“#box2”）；在#box2中移动div
$（this）.appendTo（“#box1”）；
});
.item{
宽度：50px；
高度：50px；
浮动：左；
}
#框1{
边框：1px点蓝色；
位置：相对位置；
宽度：200px；
高度：100px；
}
#i1{
背景颜色：黄色；
}
#i2{
背景颜色：绿色；
}
#i3{
背景色：红色；
}
#框2{
边框：1px纯黑；
宽度：250px；
高度：100px；
位置：相对位置；
}
在您的情况下，您必须使用

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


$（'#box1'）.off（）.on（'click'，'.item'，function（））{
//$（this.detach（）.appendTo（“#box2”）；在#box2中移动div
$（this）.appendTo（“#box2”）；
});
$（'#box2'）.off（）.on（'单击'，'.item'，函数（））{
//$（this.detach（）.appendTo（“#box2”）；在#box2中移动div
$（this）.appendTo（“#box1”）；
});
.item{
宽度：50px；
高度：50px；
浮动：左；
}
#框1{
边框：1px点蓝色；
位置：相对位置；
宽度：200px；
高度：100px；
}
#i1{
背景颜色：黄色；
}
#i2{
背景颜色：绿色；
}
#i3{
背景色：红色；
}
#框2{
边框：1px纯黑；
宽度：250px；
高度：100px；
位置：相对位置；
}
您可以使用以下方法在框之间移动它们：

$('#box1, #box2').on('click', '.item', function () {
    $(this).appendTo($(this).parent().prop('id') == 'box1' ? '#box2' : '#box1');
});


$（'box1，'box2'）。在（'click'，'item'，函数（）{
$（this）.appendTo（$（this）.parent（）.prop（'id'）=='box1'？'#box2'：'#box1'）；
});
.item{
宽度：50px；
高度：50px；
浮动：左；
}
#框1{
边框：1px点蓝色；
位置：相对位置；
宽度：200px；
高度：100px；
}
#i1{
背景颜色：黄色；
}
#i2{
背景颜色：绿色；
}
#i3{
背景色：红色；
}
#框2{
边框：1px纯黑；
宽度：250px；
高度：100px；
位置：相对位置；
}
您可以使用以下方法在框之间移动它们：

$('#box1, #box2').on('click', '.item', function () {
    $(this).appendTo($(this).parent().prop('id') == 'box1' ? '#box2' : '#box1');
});


$（'box1，'box2'）。在（'click'，'item'，函数（）{
$（this）.appendTo（$（this）.parent（）.prop（'id'）=='box1'？'#box2'：'#box1'）；
});
.item{
宽度：50px；
高度：50px；
浮动：左；
}
#框1{
边框：1px点蓝色；
位置：相对位置；
宽度：200px；
高度：100px；
}
#i1{
背景颜色：黄色；
}
#i2{
背景颜色：绿色；
}
#i3{
背景色：红色；
}
#框2{
边框：1px纯黑；
宽度：250px；
高度：100px；
位置：相对位置；
}

使用以下html：

<div id="wrapper">
    <div id ="box1" class="container">
        <div class ="item" id ="i1"></div>
        <div class ="item" id ="i2"></div>
        <div class ="item" id ="i3"></div>
    </div>

    <div id = "box2" class="container">

    </div>
</div>



这个javascript

$('.item').on('click', function(){
    var index = $("#wrapper > .container").index($(this).parent()),
        maxIndex = $('#wrapper > .container').length,
        nextIndex = (index + 1) < maxIndex ? (index + 1) : 0;

    $(this).appendTo($('#wrapper > .container').eq(nextIndex));
});

$（'.item'）。在（'click'，function（）上{
var index=$（“#wrapper>.container”）.index（$（this.parent（）），
maxIndex=$（'#wrapper>.container'）。长度，
nextIndex=（索引+1）.container'）.eq（nextIndex））；
});

用小提琴在任意数量的容器之间移动箱子

您还可以将Box3、Box4（带有class.container）等添加到“#wrapper div”中，您可以动态地执行此操作使用以下html：

<div id="wrapper">
    <div id ="box1" class="container">
        <div class ="item" id ="i1"></div>
        <div class ="item" id ="i2"></div>
        <div class ="item" id ="i3"></div>
    </div>

    <div id = "box2" class="container">

    </div>
</div>



这个javascript

$('.item').on('click', function(){
    var index = $("#wrapper > .container").index($(this).parent()),
        maxIndex = $('#wrapper > .container').length,
        nextIndex = (index + 1) < maxIndex ? (index + 1) : 0;

    $(this).appendTo($('#wrapper > .container').eq(nextIndex));
});

$（'.item'）。在（'click'，function（）上{
var index=$（“#wrapper>.container”）.index（$（this.parent（）），
maxIndex=$（'#wrapper>.container'）。长度，
nextIndex=（索引+1）.container'）.eq（nextIndex））；
});

用小提琴在任意数量的容器之间移动箱子

您还可以将Box3、Box4（带有class.container）等添加到“#wrapper div”中，您可以动态地执行此操作
问题是div仅从#box1移动到#box2一次。我不能把他们从第2箱搬回第1箱，问题是，演员只能从第1箱搬到第2箱一次。我无法将它们从框2移回框1+1。这是正确的解决方案，因为OP代码中的
click
事件仅绑定到预先存在的元素。一旦它们被移动到一个新的盒子，绑定就丢失了。通过侦听向上冒泡到父容器的事件将是最佳解决方案：）+1。这是正确的解决方案，因为OP代码中的
click
事件仅绑定到预先存在的元素。一旦它们被移动到一个新的盒子，绑定就丢失了。通过听事件冒泡到父容器将是最好的解决方案：）回答得好！但这和我回答的逻辑完全一样，你改变了什么？三元运算符？不公平！回答得好！但它正是