1

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

2 に答える 2

1

あなたが達成しようとしていることはよくわかりませんが、あなたの例は正しい動作を示しています。

イベントで init すると、最初に div をクリックしたときに div がドラッグ可能になるように初期化されることを意味.draggable()します。その後、何度も初期化されます。そのため、ページの読み込み時に、ドラッグ可能である必要があることを知りません。次にクリックすると、イベントがトリガーされ、ドラッグ可能に設定されます。mousedownhandledivmousedowndiv

すぐにドラッグできるようにしたい場合は、2番目の作業例を使用してください。それは完全に問題ありませんか、それとも何か不足していますか? これを見るjsfiddle

jQuery UI ドキュメントのDefault Functionalityの例は、まさにこれを示しています。

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

.draggable()mousedown イベントでラップする必要はまったくありません。

于 2013-05-10T15:05:18.823 に答える
0

同じ必要があります: この同じ要素のイベント mousedown にアタッチされたイベント リスナー内で要素をドラッグ可能としてセットアップすることです。ドラッグはこのマウスダウン イベントで開始する必要があります。何かをドラッグできるようにするためにユーザーに 2 回クリックするように要求することはできません。

なぜそれが必要なのですか？

ユーザーがボックスをドラッグすると、このボックスは他のボックスを一緒にドラッグするため、ユーザーが 1 つのボックスをクリックしたときに、どのボックスを一緒にドラッグするかについての情報しかありません。

これが私がやった方法です：

  • ボックスに 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 に答える