OnDragEnd 不返回起始位置

Question

我正在使用

draggable='true'

属性在我的网站中创建可拖动元素，但我遇到了外观问题。

拖动基本上是为了重新排序元素，所以我想拿起它们，将它们拖到新位置，然后简单地将它们释放到新位置，但是一旦我放手，元素就会滑回到原来的位置移动到新位置之前的原始位置。

看这张图片：

我怎样才能避免这种情况发生？我想跳过“返回”部分。

$("div").on('dragend', function(e){
    
    e.preventDefault();
    e.stopPropagation();
    $("div.slide.placeholder").replaceWith($(this));
    updateSlides();
    
})

---

编辑：

此问题已被确认为 Mac 本地化。与整个窗口弹跳效果非常相似。

Answer 1

我尝试使用 jquery 编写你想要的代码。

-->http://jsfiddle.net/oLc2f3kp

具有类

.drag_item

的元素可以被拖动。如果您将其释放到不在具有类

.release_area

的元素区域的任何位置，它将返回到之前的位置。

我希望这是你想要的。如果您对此代码有任何疑问，请问我：D


已更新我尝试了很多次现在我有了解决方案

    $('div[class=dragable]').on('dragend',function(e){
        $(this).css('top',e.originalEvent.pageY-($(this).height()/2));
        $(this).css('left',e.originalEvent.pageX-($(this).width()/2));
    });

我在拖动它时无法获取位置（我得到的位置是开始拖动之前元素的原始位置”）
所以唯一的方法（到目前为止我已经测试过）是获取当您放下鼠标并设置
left

 和 

top

 时，您的鼠标与鼠标的位置相同。

我只在 Chrome 中测试过。无论如何我不建议你这样做。

Answer 2

我已经通过

根本不使用可拖动或拖动事件解决了这个问题。

只需使用“

onmousedown”、“onmousemove”和“onmouseup”事件即可。 拖动任何固定项目的简单方法：

// link this to your element's left/top using your framework, jquery or plain js
const position = { x: 0, y: 0 };

const offset = { x: 0, y: 0 };
let dragging;

// call this in onmousedown
const onDragStart = event => {
  dragging = true;
  offset.x = event.clientX - position.value.x;
  offset.y = event.clientY - position.value.y;
}

// call this in onmousemove
const onDrag = event => {
  if (dragging) {
    position.value = {
      x: event.clientX - offset.x,
      y: event.clientY - offset.y
    };
  }
}

// call this in onmouseup
const onDragEnd = event => {
  dragging = false;
}

这种方法还可以消除恼人的阴影图像