jQuery可拖动输入元素

我试图使用jQuery UI使表单元素可拖动。 例如，按钮，复选框，文本字段等。到目前为止，我没有运气。 你有任何想法如何实现这一目标吗？

Answer 1

技巧包括在输入元素上放置透明div：

div div{ position:absolute; z-index:2; height: 100%; width: 100%; } div input{ position:relative; z-index:1; } 
 
 $('body>div').draggable(); 

Answer 2

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

Answer 3

我认为这最适合你的要求:)它的可拖动+可resize的输入元素，但你不会失去他们的性质可编辑。

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

这是我的解决方案： 我的jsFiddle 。

Answer 4

好的输入元素需要是可编辑的，因此使它们可拖动将使它们不可编辑。

将它们包裹在或

， 我强烈建议您使用句柄 。

Answer 5

最好的解决方案是将它们放入div或span中