jQuery可拖拽輸入元素

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

來源

2010-10-09 awolfe

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

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

來源

2010-10-09 03:37:10 Marko

是的，但如果你不想輸入的可編輯。 – bryan 2015-01-21 15:10:25

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

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

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

來源

2012-07-10 02:20:49 Roylee

訣竅在於把在輸入元素一個透明的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();

來源

2013-01-23 20:14:19

這就是我一直在尋找的東西。我需要顯示錶單輸入，使它們可拖動且不可用，而不改變其所見即所得的外觀。不敢相信我沒有想到這個簡單的解決方案。 – Johannes 2014-08-07 19:45:04

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

來源

2013-11-15 03:23:19 pluzzmo

也許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) 
    } 
});

來源

2014-03-07 18:09:54

'initMouseEvent'已被棄用 - 任何想法是什麼取代它？ – SQLiteNoob 2015-09-03 16:48:27

@SQLiteNoob Thx反饋。我用'MouseEvent（）'構造函數更新了答案 – 2015-09-04 08:33:20

謝謝，這是一個很好的解決方案， – SQLiteNoob 2015-09-04 15:51:49

jQuery可拖拽輸入元素

回答

相關問題