在2个框之间移动元素

Moving elements between 2 boxes

本文关键字：移动 元素 之间 2个      更新时间：2023-09-26

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

问题是div只从#box1移动到#box2一次。如果使用了detach（），那么div在#box2中是可点击的，但在点击时会被重新排列。如果remove（）使用的div在#box2中根本不可点击（事件监听器消失了？）。我有一种感觉，移动div的过程在某种程度上并不完全，我认为DOM中有重复的div或移动的div完全消失，对点击没有反应。

我尝试了各种组合的detachment（）、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');
});

在您的情况下，您必须使用事件委派

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

您可以使用在框之间移动它们

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


$('#box1, #box2').on('click', '.item', function () {
    $(this).appendTo($(this).parent().prop('id') == 'box1' ? '#box2' : '#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/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>

这使用.on()的事件委派语法来处理元素，并使用三元运算符来确定元素存在于哪个框中。

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

可以在任意数量的集装箱之间移动箱子

您还可以在"#wrapperdiv"中添加Box3、Box4（带有class.contator）等，您可以动态地进行

相关文章：