Jquery Sortable和Dragable-用Ajax结果替换拖动的内容

Question

这可能是一个简单的问题，但我如何用ajax调用中的html替换我拖动的东西？

因此，如果可拖动的项只是"文本"项（如下面的html片段所示），并且当我拖动该项时，我通过helper方法使用"图像"，那么我怎么能"拖放"不使用它们中的任何一个，而是插入ajax调用返回的html呢。

我在哪里进行调用（顺便说一句，使用ajax调用的"input-type"值来获得正确的html）？

如何防止插入默认的"拖动项目"？也就是说，我不想放入div或helper方法图像。。。。

我需要像droppable一样添加吗？还是像received事件一样在sortable上添加（有点工作，不能删除图像，但从帮助方法中删除）？？？（我一直在尝试这两种方法，虽然ajax调用有效，但我得到了数据等，考虑到我不知道如何防止默认的东西被丢弃，我不确定用调用的"结果"替换"什么"…）

$("#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()。基本上，无论你想得到什么结果，代码都应该在ui.helper.replaceWith()部分中。