jQuery可拖拽輸入元素

Question

我想使表單元素使用jQuery UI拖曳。例如，按鈕，複選框，文本框等。到目前爲止，我沒有運氣。你有什麼想法如何做到這一點？

Answer 1

那麼輸入元素必須是可編輯的，所以使他們拖動將使他們無法編輯。

總結他們在<span>或<div>和我強烈建議你使用handle。

Answer 2

我認爲這最適合您的要求:)它的可拖動+可調整大小的輸入元素，但你不會失去他們的本性是可編輯的。

$(function(){ 
    $('.draggable').draggable().resizable(); 
}); 

這是我的解決方案：my jsFiddle。

Answer 3

訣竅在於把在輸入元素一個透明的div：

div div{ 
    position:absolute; 
    z-index:2; 
    height: 100%; 
    width: 100%; 
} 

div input{ 
    position:relative; 
    z-index:1; 
} 
<div><div>&nbsp;</div><input type="text" value="..." disabled="true"/></div> 
$('body>div').draggable(); 

Answer 4

最好的解決辦法是，你把它們放進一個div或者跨度

Answer 5

也許3年爲時已晚，但你可以派遣事件並使用下面的代碼片段爲更期望的行爲：

DEMO jsFiddle

$(".draggable").draggable({ 
    start: function (event, ui) { 
     $(this).data('preventBehaviour', true); 
    } 
}); 
$(".draggable").find(":input").on('mousedown', function (e) { 
    var mdown = new MouseEvent("mousedown", { 
     screenX: e.screenX, 
     screenY: e.screenY, 
     clientX: e.clientX, 
     clientY: e.clientY, 
     view: window 
    }); 
    $(this).closest('.draggable')[0].dispatchEvent(mdown); 
}).on('click', function (e) { 
    var $draggable = $(this).closest('.draggable'); 
    if ($draggable.data("preventBehaviour")) { 
     e.preventDefault(); 
     $draggable.data("preventBehaviour", false) 
    } 
});