web-dev-qa-db-ja.com

HTML5ドラッグアンドドロップドラッグ中のアイコン/カーソルの変更

たとえば、セクションを拒否または許可するためにドラッグエンター（ドラッグオーバー/ドラッグ）アイコン/カーソルをドラッグ中に変更する方法を疑問に思っています。もちろん、絶対に配置されたDOMの一部をカーソルで移動できますが、ネイティブHTML5ソリューションに興味があります。

ありがとう！

javascripthtml5drag-and-drop
39
Alex Ivasyuv

dropEffect の後です：

Dragstartで初期化します。

event.dataTransfer.effectAllowed = "copyMove";

Dragenterで更新します。

event.dataTransfer.dropEffect = "copy";
25
zupa

ここにスタンドアロンのクロスブラウザーHTML5ドラッグアンドドロップの例があります： http://jsfiddle.net/rvRhM/1/

Dragstartおよびdragendイベントをご覧ください。 dmはドラッグされている要素です。

EventUtil.addHandler(dm, 'dragstart', function(e) {
    e.dataTransfer.setData(format, 'Dragme');
    e.dataTransfer.effectAllowed = effect;
    var target = EventUtil.getCurrentTarget(e);
    target.style.backgroundColor = 'blue';
    target.style.cursor = 'move'; // You can do this or use a css class to change the cursor
    return true;
});

ドラッグが終了したら、必ずカーソルをリセットしてください。

EventUtil.addHandler(dm, 'dragend', function(e) {  
    var target = EventUtil.getCurrentTarget(e);
    target.style.backgroundColor = '';
    target.style.cursor = 'default'; // Reset cursor
    return true;
});
9
TJ.

純粋なcssソリューションを追加します。これは、少数の人にとって便利な場合があります。 html要素でこのクラスを使用します。

.grab {
        cursor: move;
        cursor: grab;
        cursor: -moz-grab;
        cursor: -webkit-grab;
        .thumbnails-list{
            cursor: pointer;
        }
    }

    .grab:active {
        cursor: grabbing;
        cursor: -moz-grabbing;
        cursor: -webkit-grabbing;
    }
4
Kurkula

私は同じことを達成しようとしていましたが、ニースのソリューションを見つけることができませんでした。最後にしたことは、dataTransferに画像を設定し、アクションごとにそのsrcを変更することでした。そうすれば、少なくともブラウザー間で動作が一貫しています。参照として使用したページへのリンクは次のとおりです。

https://kryogenix.org/code/browser/custom-drag-image.html

1
eduedu87