如何拖放表单元素内容

时间:2013-09-12 09:33:46

标签: jquery forms jquery-ui drag-and-drop

我有一个包含表单元素的表(输入,选择等) 我想内容(或部分内容)从一个字段复制到另一个字段:ex:' flowers '从第4行到第6行。 如何在内容之前拖动内容而不是整个元素?

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

HTML:

<input type="text" />

jQuery的:

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

但我不知道是否有可能拖放内容(或值)?

1 个答案:

答案 0 :(得分:0)

你需要使用jquery draggable的helper方法。 在那个辅助方法中得到可拖动的控件.. 从该控件获取控件的值并将其设置为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();