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

Question

我有一些放置区域 $('.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/

Answer 1

利用 jQuery Draggables Stop 事件我想出了以下解决方案：

    var draggedData,
    dropLastDragged
    startPosData = {};

function checkIntersect(posData){
    var left = startPosData.left,
        top = startPosData.top,
        right = startPosData.left+startPosData.width,
        bottom = startPosData.top+startPosData.height,
        cornerLeftPos = posData.left,
        cornerTopPos = posData.top;

        cornerLeftPos += startPosData.width/2;
        cornerTopPos += startPosData.height/2;

    if((cornerLeftPos > left && cornerLeftPos < right) && (cornerTopPos > top && cornerTopPos < bottom)){
        return true;    
    }
    return false;
}

$('.drophere').droppable({
  drop: function (event, ui) {
    dropLastDragged = false;
    $(this).html(draggedData);
    $(this).draggable('enable');
  }
}).draggable({
  disabled: true,
  helper: "clone",
  start: function (event, ui) {
    startPosData.left = ui.offset.left;
    startPosData.width = $(this).width();
    startPosData.top = ui.offset.top;
    startPosData.height = $(this).height();
    draggedData = $(this).html();
    $(this).html('Drop here').draggable('disable');
    dropLastDragged = this;
  },
  stop: function(event, ui) {
    if(dropLastDragged){
        if(checkIntersect(ui.offset)){
            $(dropLastDragged).html(ui.helper.html());
            $(dropLastDragged).draggable('enable');
        }
    }
  }
});

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

Fiddle