jQuery UI - 从拖放区域拖动一个项目并将其放回同一个拖放区域 - 掉落事件不会被触发

时间:2015-08-18 11:28:11

标签: javascript jquery-ui drag-and-drop jquery-ui-draggable jquery-ui-droppable

我有多个丢弃区域$(' .drophere')和一个可拖动的存储空间$(' .dragme')。 每个放置区域只能包含一个丢弃的项目。

您可以删除新项目(替换)。您可以将项目从一个放置区域拖动到另一个放置区域。

如果您开始从放置区域拖动项目并决定将其放回同一区域 - 不会触发放置事件,因此拖动的项目将丢失。

以下是简化代码:

var draggedData;
$('.drophere').droppable({
  drop: function (event, ui) {
    $(this).attr('data-text', draggedData);
    $(this).draggable('enable');
  }
}).draggable({
  disabled: true,
  helper: "clone",
  start: function (event, ui) {
    draggedData = $(this).attr('data-text');
    $(this).attr('data-text', "").draggable('disable');
  }
});

$('.dragme').draggable({
  helper: "clone",
  start: function (event, ui) {
    draggedData = $(this).attr('data-text');
  }
});

在jQuery UI droppable中是否存在某种限制?有没有办法忘记"这种被拖物品的起源?谢谢。

刚刚添加:http://jsfiddle.net/gpnpwwbw/

1 个答案:

答案 0 :(得分:0)

利用jQuery Draggables Stop事件,我提出了以下解决方案:

<phpunit bootstrap="Bootstrap.php"
         colors="true">
    <php>
        <server name='HTTP_HOST' value='psadmin.com' />
        <server name="SERVER_NAME" value="localhost"/>
    </php>    
    <testsuites>
        <testsuite name="PricingTable Test">
            <directory>../module/</directory>
        </testsuite>
    </testsuites>
</phpunit>

Fiddle