1

要素のドラッグ開始/ドロップ イベントを検出しようとしています。これらのイベントがトリガーされていないように見えることがあります。ソースはJSFiddleにあります。オレンジ色のバーでマウスを押したままドラッグして、間隔 (青色) を作成してみてください。Chrome で、これを 3 回実行してみてください。3 回目には、ほとんどの場合、mouseup イベントがトリガーされず、効果が奇妙になっていることに気付きます。マウスが押されていない場合でも、ドラッグ イベントは引き続きトリガーされます。

Screenrのビデオ

$ ->
    isMouseDown = false
    isDragging = false
    $draggedInterval = undefined
    $test = $("#test")
    $test
        # code related to attaching handlers to trigger custom events
        .on "mousedown", ->
            isMouseDown = true
        .on "mouseup", (evt) -> 
            isMouseDown = false
            if isDragging
                $test.trigger("x-stopDrag", evt)
                isDragging = false
            else
                $test.trigger("x-click", evt)
        .on "mousemove", (evt) ->
            console.log isMouseDown, isDragging
            if isMouseDown && not isDragging
                $test.trigger("x-startDrag", evt)
                isDragging = true
            if isDragging
                $test.trigger("x-drag", evt)
        .on "mouseleave", (evt) ->
            isMouseDown = false
            if isDragging
                isDragging = false
                $test.trigger("x-cancelDrag", evt)
        # handlers for custom events
        .on "x-startDrag", (x, evt) -> 
            console.log("started dragging")
            $draggedInterval = $("<div>", {
                class: "interval"
                css: 
                    left: evt.clientX
            }).appendTo($test)
        .on "x-stopDrag", (x, evt) -> 
            console.log("stopped dragging")
            $draggedInterval = undefined
        .on "x-cancelDrag", -> 
            console.log("canceled dragging")
            $draggedInterval.remove()
            $draggedInterval = undefined
        .on "x-click", (x, evt) -> 
            console.log("click")
        .on "x-drag", (x, evt) ->
            console.log("drag")
            $draggedInterval.css("width", evt.clientX - $draggedInterval.position().left)

Firefox および IE10 で動作するようです

4

1 に答える 1

4

問題は、user-selectプロパティを使用して に設定する必要がnoneあるため、div を選択できず、マウス イベントに対して正常に動作することです (これは通常、複雑な UI 要素に対して行われます)。

http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select :

none : 要素のコンテンツはどれも選択できません。これは、特にユーザー インターフェイス要素のユーザー選択の非常に重要な値です。この値は、ボタンの動作の側面の 1 つです。 ユーザーはボタン内のコンテンツを選択できません. たとえば、ユーザーがポインティング デバイスを使用して要素を user-select: none でクリックした場合、ポインティング デバイスのボタンが「下」の場合は user-input プロパティによって対処されますが、そのポインティング デバイスのボタンが「解放された"、このプロパティは、要素のコンテンツの選択が残っていないことを保証します。これを説明するもう 1 つの方法は、user-select: none がボタンに「押しボタンのような」感触を与えるということです。'none' の値は、選択することを意図していないユーザー インターフェイスの静的テキスト ラベルにも役立ちます。たとえば、メール メッセージ ウィンドウのヘッダーで、「名前:」と表示されている部分は選択できませんが、その後のコンテンツは選択できます。このような静的テキスト ラベルにも user-input: none があります。

カーソルが許可されていないため、次のエラーが表示されました。許可されていないカーソル

修正された JS-fiddle は次のとおりです: http://jsfiddle.net/r8Phv/7/

ユーザー選択はブラウザーにはまだ実装されていませんが、ベンダー プレフィックスは Firefox2+、Chrome 6+、Opera 15、および IE 10 で機能します。

ユーザー選択のサポート表は次のとおりです: http://caniuse.com/user-select-none

于 2013-07-11T09:01:48.193 に答える