4

ネイティブのドラッグ アンド ドロップ html5 api を使用して、ドラッグ アンド ドロップ インターフェイスに取り組んでいます。他の部分には jQuery ドラッグ可能を使用しましたが、この特定の部分ではパフォーマンスが悪いため、生の JavaScript を使用します。

基本的に、マークアップは次のようになります...

<li draggable="true">
  <div class="esia_img esia_amex"></div>
  <span class="esia_imgTitle flo">AmEx</span>
</li>
<li draggable="true">
  <div class="esia_img esia_visamc"></div>
  <span class="esia_imgTitle flo">VisaMC</span>
</li>

「dragstart」の addEventListener を作成し、次の関数を実行します

function dragStart (e) {
            var t = this;
            n(t).addClass('rot_15');
            e.dataTransfer.effectAllowed = 'move';
        }

クラスを元の要素に完全に適用しますが、元の要素を移動できないようです。ブラウザは「クローン/ゴースト」画像を作成します...「setDragImage」を使用してドラッグ中に表示する独自の画像を作成できる場所を見ましたが、ユーザーがドラッグしている実際の要素をドラッグするにはどうすればよいですか?

4

2 に答える 2

0

回答1へのコメントで提供された追加情報に従って、これにアプローチする方法（私が知っている）は、htmlネイティブのドラッグドロップサポートを破棄し、自分で実装することです。

古いブラウザー (特に IE) で問題を引き起こす原因は何かは忘れましたが、onTgtMouseDown のイベント変数または clientX/scrollLeft のいずれかであると感じています。

いずれにせよ、以下のコードは現在の Chrome と IE9 でテストされています。

あなたの目的に適していることを願っています（オブジェクトを視覚的に配置しますが、DOMツリー内のノードの位置を変更しません）

<!DOCTYPE html>
<html>
<head>

<style>
#tgt
{
    position: absolute;
    border: solid 1px red;
    text-align: center;
    display: inline-block;
}
</style>

<script>
function byId(e){return document.getElementById(e);}
function myInit()
{
    var dragMe = byId('tgt');
    dragMe.ondragstart = function() { return false; }
    dragMe.onmousedown = onTgtMouseDown;
}



function onTgtMouseDown(e)
{
    var mDlg, self=this;
    var initMx, intMy, initDlgX, initDlgY, dx, dy;
    var mTgt;

    mTgt = this;


//  mDlg = this.parentNode;
//  mDlg.zIndex = 1000;
//  mDlg.style.position = 'absolute';
    mTgt.zIndex = 1000;
    mTgt.style.position = 'absolute';

    e = e || event;
    initMx = e.pageX;
    initMy = e.pageY;
    initDlgX = mTgt.offsetLeft;
    initDlgY = mTgt.offsetTop;
    // offset from top left of element to mouse when button pressed
    dx = initMx  - initDlgX;
    dy = initMy - initDlgY;

    document.onmousemove = function(e)
    {
        e = e || event;
        fixPageXY(e);
        mTgt.style.left = e.pageX-dx+'px';
        mTgt.style.top = e.pageY-dy+'px';
    }
    this.onmouseup = function()
    {
        document.onmousemove = null;
    }
}


// e = event
function fixPageXY(e) 
{
  if (e.pageX == null && e.clientX != null ) 
  {
    var html = document.documentElement
    var body = document.body
    e.pageX = e.clientX + (html.scrollLeft || body && body.scrollLeft || 0)
    e.pageX -= html.clientLeft || 0
    e.pageY = e.clientY + (html.scrollTop || body && body.scrollTop || 0)
    e.pageY -= html.clientTop || 0
  }
}

</script>

</head>
  <body onload='myInit();'>
    <div id='tgt'>Drag Me</div>
  </body>
</html>
于 2012-09-28T23:19:07.200 に答える
0

（実際には答えではありませんが、コメントするには長すぎます）

.画像が複製され、複製をドラッグします。

これが何を意味するのかよくわかりません。リンクしたページの例をコピーして貼り付けただけです。何も起こりません。要素の複製や複製はありません。おそらく、appendChild の動作がよくわからないのではないでしょうか? サンプル コードは、div を作成し、その後に画像を作成するだけです。画像をdivにドラッグアンドドロップできます。これにより、読み込まれた場合のように、img タグが div の前に置かれるのではなく、div 内に含まれるようになります。また、ターゲット div (div id='div1') にはコンテンツがないため、高さがありません。div を表示するには、div にテキストを追加する必要があります。次に、ドラッグ アンド ドロップしながら、javascript デバッガーで html 要素を確認します。ページには 1 つの画像しかなく、DOM ツリー内で再配置されるだけです。:)

ここで、これをコピーして貼り付け、デバッガーで監視します。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    id='Div1' - Drop Target
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
    id='Div2' - Drop Target
</div>

<!--
<img id="drag1" src="img/logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
-->
<h1 id='drag1' draggable='true' ondragstart='drag(event)'>Drag me</h1>

</body>
</html>
于 2012-09-26T21:32:00.553 に答える