Question

我尝试用可放置元素中的另一个可拖动元素替换可拖动元素。例如，如果drag1在div1中并且drag2被拖入div1，则drag1应该运行到drag2来自的div，而drag1现在在div1中。在我的演示中变为drag2拒绝。我怎么能意识到这一点？

demo

  function handleDropEvent (event, ui) {
    if (ui.draggable.element !== undefined) {
        ui.draggable.element.droppable('enable');
    }
    $(this).droppable('disable');
    ui.draggable.position({of: $(this),my: 'left top',at: 'left top'});
    ui.draggable.draggable('option', 'revert', "invalid");
    ui.draggable.element = $(this);
}

Answer 1

这个怎么样？

JsFiddle

这个例子是三个div，两个为drag-goal而战。基本上handleConflict(jQueryElement)检查元素是否在目标div的正上方 - 如果是 - 并且元素没有被设置为目标 - 它假设它为＆＃34;设置＆＃34;并继续。现在，如果设置了占用元素（i，e是＆＃34;在它上面＆＃34;） - 那么它将强制旧元素占据旧位置。

var occupyingSpace =＆＃34; null＆＃34 ;;

function handleConflicts(element){

    console.log($("#drag-goal").position());
    console.log(element.position());

    if(element.position().top == $("#drag-goal").position().top && 
                element.position().left == $("#drag-goal").position().left && occupyingSpace == "null"){
       occupyingSpace = element;
       console.log("defined occupyingSpace as this element")
    }
    else if(element.position().top == $("#drag-goal").position().top && 
                element.position().left == $("#drag-goal").position().left && occupyingSpace != "null"){
       occupyingSpace.css({
            left: 0,
            top: 0,
       })
       occupyingSpace = element;
       console.log("is taken");
    }

}

在droppable div中用另一个替换draggable元素

1 个答案: