Jquery 可排序和可拖动 - 用 Ajax 结果替换拖动的内容

Question

这可能是一个简单的问题，但我怎样才能从 ajax 调用中用 html 替换我正在拖动的东西？

因此，如果可拖动项只是 'text' 项（如下面的 html 片段），并且当我拖动该项时，我通过辅助方法使用 'image' ，我怎么能 'on drop' 不使用它们中的任何一个，而是插入从 ajax 调用返回的 html。

在哪里调用（顺便说一句，使用 'input-type' 值调用 ajax 以获得正确的 html）？

如何防止插入默认 'dragged item'？ IE。我不想放入 div 或辅助方法图像....

我需要添加 droppable 还是在 sortable 中像 received 事件那样添加（有点像作品，无法删除图像，但从帮助方法）？？？（我一直在尝试这两种方法，虽然 ajax 调用有效并且我得到了数据等，但我不知道如何防止默认的东西被丢弃我不确定 'what' 我是替换为通话中的 'result'...)

$("#desktoplayout").sortable({
    receive: function (event, ui) {
        $(this).append('<div>html from ajax call</div>'); // kind of works... but the image from the 'helper method' on the 'draggable' is still there.
    }
});   // A sortable list of stuff into which things are dragged.

var input-type;

$("#draggableItems .item").draggable({
    connectToSortable: "#desktoplayout",
    helper: function (event) {
        return "<div class='item'><img src='/Images/Header.png' /></div>";
    },
    start: function (event, ui) {
        input-type = $(this).find('.preview').data("input-type");
    },
    drag: function(e, t) {
    },
    stop: function(e, t) {
    }
});

和

<div id="draggableItems">
    <div class="item">
        <div class="preview" data-input-type="1">
            TEXT
        </div>
    </div>
</div>

更新

这似乎符合我的要求...在 helper 上调用 remove 是正确的做法吗？

receive: function(event, ui) {
    ui.helper.remove();
    var $this = $(this);
    $.get("somewhere", function(data) {
        // Note: presume more logic here.....
        $($this).append(data);
    });
}

Answer 1

这是一个解决方案的工作示例：

https://jsfiddle.net/Twisty/zh9szubf/

HTML

<div id="draggableItems">
  <div class="item">
    <div class="preview" data-input-type="1">
      TEXT
    </div>
  </div>
</div>

<ul id="desktoplayout">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

JQuery

$(function() {
  $("#desktoplayout").sortable({
    receive: function(event, ui) {
      var newItem;
      $.post("/echo/html/", {
        html: "<li class='newItem'>From Ajax</li>"
      }, function(data) {
        ui.helper.replaceWith(data);
      });
    }
  });

  var inputType;

  $("#draggableItems .item").draggable({
    connectToSortable: "#desktoplayout",
    helper: function (event) {
      return "<div class='item'><img src='/Images/Header.png' /></div>";
    },
    start: function(event, ui) {
      inputType = ui.helper.find('.preview').data("input-type");
    }
  });
});

这也适用于 $.get()，但对于示例，它必须是 $.post()。基本上，无论你想要什么 top 是结果，该代码应该在 ui.helper.replaceWith() 部分。

Jquery 可排序和可拖动 - 用 Ajax 结果替换拖动的内容

Jquery Sortable and Dragable - Replace dragged content with Ajax result

jquery-ui

jquery-ui-draggable