1

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

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

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

我考虑过使用计数器，但有 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');
    }
});
4

2 回答 2

0

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

W3C 规范

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

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

于 2013-08-23T18:37:58.247 回答
0

尝试这个：\

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参数可以说明它是哪个。

小提琴

于 2013-08-23T20:19:09.030 回答