0

divをドラッグ可能にするJavaScriptコードを探していましたが、jQueryをダウンロードする必要があるということだけが見つかりました。これは、JavaScriptを使用してjQueryなしでdivをドラッグ可能にする方法があります。

4

3 に答える 3

2

絶対。ドラッグは実際には非常に簡単です。いくつかの手順がありますが、概要は次のとおりです。

  • まず、要素をドラッグ可能にするには、次のdraggableような属性を追加するだけ
    <div draggable="true">です: draggable="false"画像とリンクはデフォルトでドラッグ可能であることに注意してください - 場合によっては、それらに属性を設定したいかもしれません。

  • ドラッグされたときに何かをする必要があります。dragstart要素にイベント リスナーを設定します。このイベントでは、おそらく次のようなコードを含めたいと思うでしょう:

evt.dataTransfer.clearData(); // clear any default data
evt.dataTransfer.setData("Text","This is some text");
somevar = this; // store the element being dragged

  • 次に、要素を有効なターゲットにドラッグしたときに何が起こるかを処理する必要があります。dragenterとdragover. _ 1 つ目は実際にターゲットに入ったときに発火しますが、2 つ目は同じように発火mousemoveします。通常、両方に同じイベントが必要です。この場合、ターゲットを有効なドロップ ポイントにするには、and を呼び出す必要がありますevt.preventDefault()(return false既定のアクションではドロップを許可しないため)。

  • 最後に、dropイベントをターゲット要素に添付します。このイベントは、ドラッグしている要素を適切な領域にドロップすると発生します。

dragendオプションで、ソース要素にイベントを追加することもできます。これは、ドロップが成功したかどうかに関係なく、要素がドラッグされなくなったときに発生します。dragleaveドロップターゲットから離れた場合もあります。

さらにサポートが必要な場合はお知らせください。ただし、これでその方法が説明されていることを願っています。そして今、非常に基本的な例:

<div id="source" draggable="true" style="background:#f88">Drag me</div>
<div id="target" style="background:#88f;padding:5px">Drop here</div>
<script type="text/javascript">
    var source = document.getElementById('source'),
        target = document.getElementById('target'),
        dragging = null, // the element being dragged
        addEvent = function(source,types,handler) {
            // this is just a standard cross-browser event registration function
            // it can handle more than one type at once
            var typearr = types.split(" "), l = typearr.length, i;
            for( i=0; i<l; i++) {
                if( source.addEventListener)
                    source.addEventListener(typearr[i],handler,true);
                else
                    source.attachEvent("on"+typearr[i],handler,true);
            }
        };
    addEvent(source,"dragstart",function(evt) {
        evt = evt || window.event;
        evt.dataTransfer.clearData();
        dragging = this;
        setTimeout(function() {dragging.style.opacity=0.5;},1);
        // ^ tiny pause so browser can get the right drag image
    });
    addEvent(target,"dragenter dragover",function(evt) {
        if( dragging) {
            this.style.backgroundColor = "#8f8";
            evt = evt || window.event;
            if( evt.preventDefault) evt.preventDefault();
            return false;
        }
    });
    addEvent(target,"dragleave",function() {this.style.backgroundColor = "#88f";});
    addEvent(target,"drop",function() {
        if( dragging) {
            this.appendChild(dragging);
            this.style.backgroundColor = "#88f";
            dragging = null;
            if( evt.preventDefault) evt.preventDefault();
            return false;
        }
    });
    addEvent(source,"dragend",function() {this.style.opacity=1;});
</script>

そして、ここにフィドルがあります。

于 2013-03-07T19:41:59.257 に答える
0

はいあります。ただし、ブラウザの違いに対処する必要があります。

http://www.w3.org/html/wg/drafts/html/master/editing.html#dnd

JQuery を使用することを強くお勧めします。そうしない理由はありません。

于 2013-03-07T19:18:44.250 に答える
0

jquery は Google によってホストされているため、ダウンロードする必要はなく、次のように参照するだけです。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

Google がホストする jquery の詳細については、http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/ をご覧ください。

ただし、純粋な js をどうしても使用したい場合は、次のチュートリアル を強くお勧めします: http://tech.pro/tutorial/650/javascript-draggable-elements

于 2013-03-07T19:20:21.687 に答える