3

我正在使用 jQuery UI 可拖动功能。完整的代码更复杂，所以我只是创建了一个简单的测试场景来解决这里的错误：Fiddle

有两个部分“顶部”和“内容”。“顶部”部分有一个黄色按钮，可拖动。

当我将顶部的黄色按钮拖放到灰色的“内容”区域时，它将在灰色内容中显示：

黄色框 1 项目 1 项目 2 项目 3 添加新项目（按钮）

当我单击“添加新项目”按钮时，“项目 4”文本将添加到项目 3 文本下。当我再次单击“添加新项目”按钮时，“项目 5”文本将添加到项目 4 文本下，依此类推......

它按预期工作。但是，当我再次拖动顶部的黄色按钮并将其拖放到灰色区域时，问题就出现了，我将有如下内容：

黄色框 1 项目 1 项目 2 项目 3 项目 4 项目 5 添加新项目

黄色框 2 项目 1 项目 2 项目 3 添加新项目

因此，当我返回并且每次单击黄色框 1 下的添加新项目按钮时，它会为每次单击添加两个新项目，而不是仅添加一个（它将在项目 5 下添加项目 6 和项目 7），这不是什么我想了。

我试图取消事件冒泡和其他一些事情，但不知何故它不起作用。当我在不使用 jQuery UI 可拖动函数的情况下隔离相同的场景时，它的行为与预期一样。所以我猜这个错误与我如何实现可拖动功能有关。谢谢您的帮助。

这是代码：

$(function() {
    $('#content').sortable({
        placeholder: 'ui-state-highlight'
    });

    $(".top-icon").draggable({
        connectToSortable: '#content',
        helper: myHelper,
        stop: handleDragStop
    });

    function myHelper(event) {
        return $(this).clone();
    }

    var i = 1;
    function handleDragStop(event, ui) {
        var current_text = '<div class="color-box"><b>Yellow Box ' + i + '</b>'
            + '<div class="yellow-content">'
            + '<div class="item">Item 1</div>'
            + '<div class="item">Item 2</div>'
            + '<div class="item">Item 3</div>'
            + '<div class="add-item">Add New Item</div>'
            + '</div>'
            + '</div>';
        $('#content .top-icon').after(current_text);

        i++;

        var $new_insert_item =  $('#content .top-icon').next();
        $('#content .top-icon').remove();  // remove the clone .top-icon inside #content

        console.log('hi');
        // when click on Add New Item button
        $('.color-box').on('click', '.add-item', function() {

            var $this = $(this);
            var item_count = $this.siblings('.item').length + 1;
            console.log (item_count);

            var str_item = '';
            str_item = '<div class="item">Item ' + item_count + '</div>';

            $(str_item).insertBefore($this);
        });
    }
    // end of handleDragStop
});
4

1 回答 1

2

问题是，将handleDragStop绑定事件中的单击事件也绑定到现有的已拖动项目，因此现有的拖动项目在每次拖动期间将单击事件加 1。因此，改为将事件绑定到外部并将事件绑定到#content（如果这是甚至在第一次拖动之前就存在于 DOM 中的容器）以进行委托。

  $('#content').on('click', '.add-item', function () {
        var $this = $(this);
        var item_count = $this.siblings('.item').length + 1;
        console.log(item_count);
        var str_item = '';
        str_item = '<div class="item">Item ' + item_count + '</div>';
        $(str_item).insertBefore($this);
    });

小提琴

于 2013-08-29T01:01:27.757 回答