如何使输入字段可拖动[关闭]答案

【问题标题】：How to make an input field draggable [closed]如何使输入字段可拖动[关闭]
【发布时间】：2014-04-02 14:07:02
【问题描述】：

我有一个下拉/输入字段，但我想将一个可拖动的事件放入其中。当我第一次拖动它时，它移动得很顺畅，但是当我开始编辑输入字段内的文本时，我似乎无法再拖动它了。我一直在研究可拖动的方法，但没有运气。

基本上我有一个<div> 包裹着下拉/输入字段，其中附加了可拖动事件。

<div class="draggable">
    <select>
       <option>
    </select>
    <input>
</div>

是这样的。下面是具有下拉/输入字段的代码的链接，但它仍然具有可拖动事件。

http://jsfiddle.net/yUxr4/406/

编辑：这是更新的代码，但可拖动的不起作用。我不知道为什么。 http://jsfiddle.net/9SPvQ/1/

【问题讨论】：

你确定你已经发布了相关的jsFiddle吗？可拖动部分在哪里？
我无法实现可拖动部分，因为我不知道如何实现。
只在左侧面板中包含 jQuery UI，当然，在 JS 部分中包含相关代码
抱歉，回复晚了，本应工作的可拖动下拉菜单应该可以工作，但我似乎找不到解决方法。

标签： javascript jquery html jquery-ui draggable

【解决方案1】：

您需要调度事件，因为 jQuery UI 可拖动阻止了输入元素上的拖动行为。现在，要让输入元素仍然响应，您可以使用以下解决方法：

DEMO jsFiddle

$(".draggable").draggable({
    start: function( event, ui ) {
       $(this).data('preventBehaviour', true);
    }
});

$(".draggable :input").on('mousedown', function (e) {
    var mdown = document.createEvent("MouseEvents");
    mdown.initMouseEvent("mousedown", true, true, window, 0, e.screenX, e.screenY, e.clientX, e.clientY, true, false, false, true, 0, null);
    $(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)
    }
});

【讨论】：

哇好代码。棘手的问题。