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可拖拽输入元素

回答

相关问题