Question

也许这是设计上的，但我希望句柄为draggable，而不是在第一次鼠标播放之后。

<html>
<head>

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" rel="stylesheet" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
    <script>
        $(function () {


            var handle = $("#handle");

            handle.on("mousedown", function () {

                // doesn't work
                handle.draggable();
            });


            // works
            handle.draggable();
        });
    </script>
</head>
<body>
    <div style="width: 400px; height: 400px; border: 2px solid gray; position: relative;">

        <div id="handle" style="width: 50px; height: 50px; position: absolute; top: 100px; left: 100px; background-color: gray;"></div>
    </div>
</body>
</html>

Answer 1

我不确定你要完成什么，但你的例子证明了正确的行为。

如果你在.draggable()事件中初始化mousedown，这只意味着当你第一次点击div时handle div被初始化为可拖动。之后，它一次又一次地被初始化。因此，在页面加载时，div不知道它必须是可拖动的。如果您再点击它，则mousedown事件会触发，并将div设置为可拖动。

如果你希望它可以立即使用你的第二个工作 - 例子。它完全没问题或我错过了什么？见 jsfiddle

jQuery UI文档中的Default Functionality示例正好显示了这一点。

 $(function() {
    //element with ID "draggable" is draggable after the DOM has loaded
    $( "#draggable" ).draggable();
});

根本不需要在{mousedown事件中包装.draggable()。

Answer 2

我有同样的需求：在附加到同一元素的事件mousedown的事件侦听器中设置一个可拖动的元素。拖动必须从这个mousedown事件开始，我不能要求用户点击两次以便能够拖动一些东西！

为什么我需要它？

因为当用户拖动一个盒子时，这个盒子会将一些盒子拖到一起，而且当用户点击一个盒子时，我只能知道要将哪些盒子拖到一起。

我就这样做了：

在框中添加了一个mousedown监听器。
在这个听众身上： 1）检查拖动是否已经开始。 2）如果不是： a）找出要拖到哪个方框， b）使盒子可拖动， c）标记拖动已经开始然后 d）创建一个新的mousedown事件并发送它。

下面是我的代码片段，它符合我的描述（并且它正在运行，至少在Chrome上...）：

$.fn.adjustDragging = function (opts)
{
    // bDragNeed2BeAdjusted: if true, indicates that the box isn't draggable yet
    this[0].bDragNeed2BeAdjusted = true;
    this.mousedown(function(e)
    {
        if (this.bDragNeed2BeAdjusted)
        {
            this.bDragNeed2BeAdjusted = false;

            // Make box and her sisters draggable
            $(this).doAdjustDragging(opts);

            e.preventDefault();

            // Send a new mousedown event
            if (document.createEvent)
            {
                var evtNew = document.createEvent('MouseEvents');
                evtNew.initMouseEvent(
                    'mousedown', 
                    e.bubbles, e.cancelable, e.view, e.button, 
                    e.screenX, e.screenY, e.clientX, e.clientY, 
                    e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, e.button, this
                );
                this.dispatchEvent(evtNew);
            }
            else
            {
                options.clientX = options.pointerX;
                options.clientY = options.pointerY;
                var evtNew = document.createEventObject();
                evtNew = extend(evt, {clientX: e.pointerX, clientY: e.pointerY});
                this.fireEvent('onmousedown', evtNew);
            }

            return false;
        }
    });

};

在mousedown处理程序中设置draggable

2 个答案: