EasyUI使用Draggable方法拖拽后记录最后位置如何实现?

Question

在拖拽后记录最后的位置并下次打开现在在最后拖拽位置.
使用easyui拖拽动态生成的页面，如何刷新后仍保持拖拽后的样式，最好可以个来点代码.

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

要使用Draggable方法拖拽后记录最后位置并刷新页面以保持拖拽后的样式，您可以在JavaScript中使用以下方法：

1. 首先，在您的HTML文件中为元素添加draggable属性，并设置一个事件监听器来处理拖动操作。

<div id="myDiv" draggable="true">
  <p>Drag me!</p>
</div>

1. 在CSS中定义一个样式类（例如：.dragged）来表示当前被拖动的元素。这将用于确定何时更新元素的实际位置。

.dragged {
  background-color: yellow;
}

1. 在JavaScript中，您可以创建一个新的变量来存储当前的拖拽位置。然后，当用户开始拖动时，使用startDragging()方法将其设置为当前位置。每当拖动结束时，使用endDragging()方法将新的拖拽位置作为参数传递给它。

// JavaScript代码

var lastPosition = null;

$('#myDiv').on('mousedown', function(event) {
  // 开始拖动
  startDragging();
});

function startDragging() {
  var div = $(this);
  div.data('lastPosition', {x: event.clientX, y: event.clientY});
}

function endDragging(newPosition) {
  if (newPosition.x !== lastPosition.x || newPosition.y !== lastPosition.y) {
    // 更新元素的实际位置
    div.css({
      left: newPosition.x - div.width() / 2,
      top: newPosition.y - div.height() / 2
    });

    // 更新拖拽位置
    lastPosition = {x: newPosition.x, y: newPosition.y};
  }
}

1. 当页面加载完毕或通过Ajax请求刷新时，确保重新计算拖拽位置和元素的实际位置。这样做的目的是在刷新后仍然保留拖拽后的样式。

$(document).ready(function(){
  // 刷新元素实际位置
  $('#myDiv').data('lastPosition').x = div.offset().left;
  $('#myDiv').data('lastPosition').y = div.offset().top;

  // 刷新拖拽位置
  startDragging();

  // 重新计算拖拽位置和元素实际位置
  setTimeout(endDragging, 500); // 每隔500毫秒检查一次
});

这个解决方案会根据用户的拖拽行为实时地调整元素的实际位置，同时也能有效地保存拖拽过程中的状态。