Question

我有4个可拖动选项和3个可丢弃的存储桶。当我将选项拖到droppable时，draggable会占用存储桶的值。 droppable也采用了类'.dropped'。我需要的两件事：

当从存储桶中移除拖动时，它会丢失值
当从droppable中移除所有可拖动的东西时，它会丢失'.dropped'类

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

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

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

仅当删除了所有可拖动项时，Jquery .out（）才会删除droppable类

2 个答案: