在两个div之间移动块

debugcn 发表于 Dev

A1exandr

所以我有两个div，里面有几个街区：

<div class="list-block 01">
    <span>[email protected]</span>
    <span class="moveSym" id="01">+</span>
</div>

如果一次点击+整段移动到另一格。一切正常，但只能将ech块移动到另一个div，但是我需要它们尽可能多地.moveSym单击。

我的JS

    //remove block on click
$('.del-block').on('click', function() {
    var block = $(this).attr('id');
    $('.' + block).remove();
})

//move form list blocks to different fields
$('.leftSide01 .moveSym').click(function() {
    console.log($(this).attr('id'));
    var id = $(this).attr('id');
    $(this).text("-");
    $('.leftSide01 .list-block.' + id).appendTo('.rightSide01');
})
$('.rightSide01 .moveSym').click(function() {
    console.log($(this).attr('id'));
    var id = $(this).attr('id');
    $(this).text("+");
    $('.rightSide01 .list-block.' + id).appendTo('.leftSide01');
})

我知道有用于此的插件，但我真的很想自己编写并学习:)小提琴http://jsfiddle.net/A1ex5andr/CRvVK/

阿伦·P·约翰尼（Arun P Johny）

需要使用事件委托，因为要执行的处理程序取决于父元素。

//move form list blocks to different fields
$('.leftSide01').on('click', '.moveSym', function () {
    console.log($(this).attr('id'));
    var id = $(this).attr('id');
    $(this).text("-");
    $('.leftSide01 .list-block.' + id).appendTo('.rightSide01');
})
$('.rightSide01').on('click', '.moveSym', function () {
    console.log($(this).attr('id'));
    var id = $(this).attr('id');
    $(this).text("+");
    $('.rightSide01 .list-block.' + id).appendTo('.leftSide01');
})

演示：小提琴

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。