jquery - 如何拖放表单元素内容

Question

我有一个包含表单元素（输入、选择等）的表格。我想将内容（或部分内容）从一个字段复制到另一个字段：例如：“花”从第 4 行到第 6 行。如何先拖动内容而不是整个元素？

此示例将使用 jQuery ui拖动整个输入元素：

html:

<input type="text" />

jQuery：

$("input").draggable({
    cancel: null    
});

但我不知道是否有可能拖放内容（或值）？

Answer 1

您需要使用 jquery 可拖动的辅助方法。在该辅助方法中获取可拖动控件..从该控件中获取控件的值并将其设置为 hellper 值。在删除时从 ui.helper 中获得该值

 $(dragableSelector).draggable({
            scroll: false,
            appendTo: "body",
            cursor: "move",
            cursorAt: { top: 5, left: -20 },
             helper: function (event) {
                //your intput conrol
var ctrl = $(this);
//get value from control
var val = ctrl.attr('val');
//wrap it in div soo you can see on dragging.
var div = $("<div style='z-index:9999;position:absolute;overflow:auto;' >"+val+ 
"</div>");

在你放弃部分你需要做一些这样的事情。

$(dropableElementSelector).droppable({
  drop: function (event, ui) {
   //your desire value is
  var desireval =$(ui.helper).html();