Question

我有一个可拖动的元素，当它放到目标上时，会添加一个删除按钮：

    $( "#committed" ).droppable({
                hoverClass: 'drophover',
                drop: function( event, ui )
                {

                    $(function()
                    {
                        var done;

                        if( done ) return;
                        done = true;

                        $(ui.draggable).append('<button class="delBtn" type="reset">X</button>');

                        $(ui.draggable).draggable( "option", "disabled", true );

                        $( "#sortable" ).sortable();
                        $( "#sortable" ).disableSelection();                            

                    });

                }

一旦被删除，它就变得可以排序。问题是，每次对元素进行排序时，都会再次添加“删除”按钮。由于有多个元素被拖放然后排序，因此.length>?不起作用。

我基本上需要

If (this.delBtn exists)

Answer 1

我更新了另一个jsfiddle项目，只有当可拖动对象上的按钮不存在时才添加按钮：jsfiddle example

这里的诀窍是：

if ($(ui.draggable).find('button.delBtn').length == 0) {
      $(ui.draggable).append('<button class="delBtn" type="reset">X</button>');
}

它检查拖动的项目是否包含类delBtn的按钮。如果没有，则添加按钮。

Answer 2

这样的事情不会让你出局吗？

if($('button.delBtn').length > 0)
{
    // The delete button exists...
}

在droppable drop上只将div添加到另一个div上一次

2 个答案: