1

也许这是设计使然，但我希望手柄立即draggable生效，而不是像目前发生的那样在第一次 mouseup 之后。

<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>
4

2 回答 2

1

我不确定您要完成什么，但您的示例演示了正确的行为。

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

如果您希望它立即可拖动，只需使用您的第二个 - 工作示例。完全没问题还是我错过了什么？看到这个jsfiddle

jQuery UI 文档中的默认功能示例正好说明了这一点。

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

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

于 2013-05-10T15:05:18.823 回答
0

我有同样的需求：在附加到同一元素的事件 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;
        }
    });

};
于 2014-01-08T19:36:46.343 回答