ドラッグ要素を達成するために2つの方法

　　最初の方法：APIのdataTransfer H5を使用して

　　アイデアの実現：

　　1.ドラッグ要素をドラッグアンドドロップし、変換されたデータストレージにはdragstartイベントIDを付与する許可するように設定されています。

　　2.要素の配置をできるように、ブラウザのデフォルトのイベントを防止するためのイベントを追加、および要素を配置するドロップイベントを与えるために、プロパティのdragoverコンテナを追加します。

　　コードは以下の通りであります：

< HTML > 
< ヘッド> 
    < メタのcharset = "UTF-8" > 
    < スタイル> 
        .box1 { 
            幅：100pxに。
            高さ：100pxに。
            国境：1pxの黒ベタ。
            マージン下：20ピクセル; 
            背景：水色。
        } 

        .box2 { 
            幅：100pxに。
            高さ：100ピクセル; 
            国境：1pxの黒ベタ。
            背景：lightcoral 。
        } 
    </ スタイル> 
</ ヘッド> 

< 身体> 
    <！ - 参数要传入イベント对象- > 
    < divのクラス= "BOX1" は、OnDblClick = "allowdrop（イベント）" ondrop = "ドロップ（イベント）" > 
        < img SRC = "IMG / 2.JPG" ALT = "00" ドラッグ可能= "true"をondragstart =」幅= "50" 高さ= "50" > 
        < スパン>我是盒子一</ スパン> 
    </ DIV > 
    < DIV クラス= "BOX2" は、OnDblClick = "allowdrop（イベント）" ondrop = "ドロップ（イベント）" > 
    < スパン>我是盒子二</ スパン> </ DIV > 
    < スクリプト> 
        関数allowdrop（E）{ 
            e.preventDefault（）。
        } 

        関数降下（E）{ 
            E。
            preventseverybodyデフォルト（）; したデータ= e.dataTransfer.getData（" テキスト" ）。
            e.target.appendChild（のdocument.getElementById（データ））。
        } 

        関数ドラッグ（E）{ 
            e.dataTransfer.setData（" テキスト" 、e.target.id）。
        } 
    </ スクリプト> 
</ ボディ> 

</ HTML >

　　第二の方法：ネイティブJSを使用することは、（位置計算要素を配置することによって達成結合）

　　アイデア：

　　　　1.マウスおよび境界要素の左端からの距離を取得します。

　　　　相対距離を算出した後2.スタイルを与える、元の要素の相対位置を移動させます。

< HTML > 
< ヘッド> 
    < メタのcharset = "UTF-8" > 
    < スタイル> 
        .box1 { 
            幅：100pxに。
            高さ：100pxに。
            国境：1pxの黒ベタ。
            マージン下：20ピクセル; 
            背景：水色。
        } 

        .box2 { 
            幅：100pxに。
            高さ：100ピクセル; 
            国境：1pxの黒ベタ。
            背景：lightcoral 。
        } 

        #drag { 
            位置：相対。
        } 
    </ スタイル> 
</ ヘッド> 

< ボディ> 
    < DIV クラス= "BOX1" ID = "ドラッグ" > 
        < スパン>我是盒子一</ スパン> 
    </ DIV > 
    < DIV クラス=」> 
        < スパン>私は2つのカセット</ スパン> </ divの> 
    < スクリプト>を
        LETドラッグ= document.querySelector（" #drag " ）; // 取得した操作要素
        drag.onmousedown =  機能（E）{ // マウスプレストリガされた
            のvar DISX = e.pageX - drag.offsetLeft; // 取得し、マウスの相対元素距離
            のvar DISY = e.pageY - drag.offsetTop; 
            にconsole.log（e.pageX）。 
            にconsole.log（drag.offsetLeft）。 
            document.onmousemove =  関数（E）{ // 対応する要素が位置に移動されるイベントをトリガするマウスの移動、
                drag.style.left = e.pageX - DISX +  ' PX ' ; 
                drag.style .top = e.pageY - DISY +  ' PX ' ; 
            } 
            document.onmouseup =  関数（）{ // マウスは、結合事象の明確な持ち上げ、要素はに対応する位置に配置され
                document.onmousemove =  ヌル。
                document.onmousedown =  ヌル; 
            }; 
            e.preventDefault（）; // デフォルトのイベントブラウザを停止
        };
     </ スクリプト> 
</ ボディ> 

</ HTML >

ドラッグ要素を達成するために2つの方法

おすすめ