如何使输入字段可拖动 [英] How to make an input field draggable

问题描述

我有一个下拉菜单/输入栏，但我想把一个可拖动的事件放进去。当我第一次拖动它时，它会平滑移动，但是当我开始编辑输入字段内的文本时，我似乎无法再拖动它。

I have a dropdown/input field, but I want to put a draggable event into it. When I drag it for the first time, it moves smoothly, but when I start to edit the text inside the input field, I can't seem to drag it around anymore. I've been researching the on the draggable methods but no luck.

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

Basically I have a <div> wrapped around the dropdown/input field where the draggable event is attached.

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

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

It's something like that. Below is the link for the code that has the dropdown/input field, but it still has the draggable event.

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

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

推荐答案

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

You need to dispatch event because jQuery UI draggable prevent drag behaviour on input element. Now, to still have input element responsive, you can use following workaround:

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

这篇关于如何使输入字段可拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！