Question

我正在尝试实现拖放。一切都按预期工作，但是，当用户将包含文本的div拖动到包含文本的droppable div时，我希望用户能够看到在他们释放鼠标之前拖动可放置区域时的样子算了吧。

本质上，我希望他们能够在删除文本之前预览文本在新地点中的样子，然后通过AJAX将其提交给数据库。

实际的拖放按预期工作，但是一旦用户将元素拖动到可放置区域，我就无法弄清楚如何交换这两个元素。

我试图在over事件上交换它们，然后恢复out事件。但是，一旦我将拖动的div的值设置为潜在的丢弃位置，我就无法将其恢复。

我尝试将拖动的文本存储在Over中的变量中：但是，当我尝试将其设置回Out：事件时，它会丢失范围。

期望的效果是：

用户在可放置区域上拖动元素。 droppable中的文本与被拖动的内容交换。如果用户喜欢更改，则只需提交更改即可。如果没有将它全部恢复到原来的状态。

下面是我尝试使用的一小段代码，显然是失败了。

tolerance: "pointer",
helper: "clone",
hoverClass: "dragndrophover",
over: function(event, ui) {
   if( $(this).hasClass('xlt_text') ){
        //ui.draggable.html($(this).html());
    }
},
out: function(event, ui) {

    if( $(this).hasClass('xlt_text') ){
        //$(this).html(ui.draggable.html());

    }
},

任何帮助将不胜感激。

Answer 1

您可以清除事件中的文字：

tolerance: "pointer",
helper: "clone",
hoverClass: "dragndrophover",
over: function(event, ui) {
  if( $(this).hasClass('xlt_text') ){
    $(this).text(ui.draggable.text());
  }
},
out: function(event, ui) {
   $(this).text(""); // clear the added text
},

在删除元素之前，在droppable区域中预览可拖动元素

1 个答案: