Question

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

基本上我在附加可拖动事件的下拉/输入字段周围有一个<div>。

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

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

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

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

Answer 1

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

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

如何使输入字段可拖动

1 个答案:

DEMO jsFiddle