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

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

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

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

如何防止插入默认的“拖动项”？也就是说，我不希望放入div或helper方法映像

我是否需要添加一个类似于

可拖放的

，或者我是否需要在类似于

已接收的

事件的

可排序的

中执行此操作（工作类型，不能删除图像，但可以从帮助方法中删除）？？？（我一直在尝试这两种方法，虽然ajax调用起作用，我得到了数据等，但考虑到我不知道如何防止删除默认内容，我不确定用调用的“结果”替换“什么…”

---

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

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>

正文

项目1
项目2
项目3
项目4

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");
    }
  });
});

$（函数（）{
$（“#桌面布局”）。可排序({
接收：功能（事件、用户界面）{
var新项目；
$.post（“/echo/html/”{
html:
来自Ajax
“
}，函数（数据）{
ui.helper.replaceWith（数据）；
});
}
});
变量输入类型；
$（“#draggableItems.item”）.draggable({
connectToSortable:“#桌面布局”，
助手：函数（事件）{
返回“”；
},
开始：功能（事件、用户界面）{
inputType=ui.helper.find（'.preview'）.data（“输入类型”）；
}
});
});

---

这也适用于

$.get（）

，但对于示例，它必须是

$.post（）

。基本上，无论您希望结果是什么，该代码都应该位于

ui.helper.replaceWith（）

部分。

也更新为包含

inputType

数据：对各种状态有点花哨：更多的代码清理，在抓取

文本时发现一个bug，而不是框本身：
receive: function(event, ui) {
    ui.helper.remove();
    var $this = $(this);
    $.get("somewhere", function(data) {
        // Note: presume more logic here.....
        $($this).append(data);
    });
}

<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>

$(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");
    }
  });
});