Question

我在这个主题上看过同样的问题，但不知何故建议的解决方案对我不起作用：/

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

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

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()分开。

＆＃13;

$('#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');
});

＆＃13;

.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;
    
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用以下方法在框之间移动它们：

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>

＆＃13;

这使用.on()的事件委托语法来处理元素，并使用三元运算符来确定元素所在的框。

Answer 3

使用此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));
});

在你的小提琴中移动任意数量的容器之间的盒子

您也可以将Box3，Box4（带有类.container）等添加到＆＃34; #wrapper div＆＃34;中，您可以动态地进行操作

在2个盒子之间移动元素

3 个答案: