Jquery .out() 仅在删除所有可拖动类时才删除可放置类

Question

我有 4 个可拖动选项和 3 个可放置桶。当我将一个选项拖到一个可放置对象时，可拖动对象会采用存储桶的值。 droppable 还具有“.dropped”类。我需要两件事：

1. 当可拖动对象从存储桶中移除时，它会丢失值
2. 从 droppable 中删除所有可拖动对象时，它会丢失 '.dropped' 类

我遇到的问题是 .out(event,ui) 中的 ui 参数是空的（每个 http://api.jqueryui.com/droppable/#event-out），所以我无法从中获取任何信息来更新可拖动值或计算数字droppable 内的可拖动对象的数量。

我考虑过使用计数器，但有 3 种不同的 droppables。有什么建议吗？

HTML：

<div class="row-fluid">
    <div class="drag-option span1 draggable" id="option1">Option 1</div>
    <div class="span2"></div>
    <div class="drag-option span1 draggable" id="option2">Option 2</div>
    <div class="span2"></div>
    <div class="drag-option span1 draggable" id="option3">Option 3</div>
    <div class="span2"></div>
    <div class="drag-option span1 draggable" id="option4">Option 4</div>
</div>
<div class="row-fluid">
    <div class="drop-option droppable span4" value="1">1</div>
    <div class="drop-option droppable span4" value="2">2</div>
    <div class="drop-option droppable span4" value="3">3</div>
</div>

jQuery

// Drag Drop functions
$('.draggable').draggable({containment: "#drag-radio"}).css('cursor','move');
$('.droppable').droppable({
    accept: ".drag-option",
    hoverClass: "drop-hover",
    // Make the drag option inherit the drop value
    drop: function(event,ui){
        ui.draggable.attr('value',$(this).attr('value'));
        $(this).addClass('dropped');

    },
    // Remove draggable value and droppable .dropped class
    out: function(event,ui){
        ui.draggable.attr('value','');
        $(this).removeClass('dropped');
    }
});

Answer 1

编辑：我可能会误导你一些。问题是您在“div”标签中使用value。 div 标签没有value 属性，这就是它未定义的原因。您需要将这些更改为可以包含值属性的其他内容。

W3C specs

这是一个新的工作 JSFiddle，使用 input 标签而不是 div。我将它们设为只读，以便无法输入它们。这可能不是您理想的解决方案，但我想向您展示您正在正确地做事，只是 div 不使用 value 属性。

http://jsfiddle.net/cFcup/5/

Answer 2

试试这个：\

HTML：

<div class="row-fluid">
    <div class="drag-option span1 draggable" id="option1">Option 1</div>
    <div class="span2"></div>
    <div class="drag-option span1 draggable" id="option2">Option 2</div>
    <div class="span2"></div>
    <div class="drag-option span1 draggable" id="option3">Option 3</div>
    <div class="span2"></div>
    <div class="drag-option span1 draggable" id="option4">Option 4</div>
</div>
<div class="row-fluid">
    <div class="drop-option droppable span4" data-value="1" readonly>1</div>
    <div class="drop-option droppable span4" data-value="2" readonly>2</div>
    <div class="drop-option droppable span4" data-value="3" readonly>3</div>
</div>

JS：

$('.draggable').draggable({
    containment: "#drag-radio"
}).css('cursor', 'move');
$('.droppable').droppable({
    accept: ".drag-option",
    hoverClass: "drop-hover",
    // Make the drag option inherit the drop value
    drop: function (event, ui) {
        ui.draggable.data('value', $(this).data('value'));
        alert(ui.draggable.data('value'));
        $(this).addClass('dropped');
    },
    // Remove draggable value and droppable .dropped class
    out: function (event, ui) {
        $(".draggable[data-value=" + $(this).data('value') + "]").data('value', '');
        $(this).removeClass('dropped');
    }
});

它使用数据集属性而不是非标准值属性。然后它使用与数据集属性匹配的选择器来查找被删除的可拖动对象，因为没有ui 参数来说明它是哪个。

FIDDLE