X座標とY座標を使用して要素を配置する

Question

私はJavascriptの新機能です.IteractJSを使用して、より小さな画像を大きな画像にドラッグ＆ドロップする簡単なドラッグアンドドロップを行っています。私が設定されているデータ-xと、データ-yの属性だけでドロップされた要素の位置であると仮定しています

function dragMoveListener (event) { 
    var target = event.target, 
     // keep the dragged position in the data-x/data-y attributes 
     x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx, 
     y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; 

    // translate the element 
    target.style.webkitTransform = 
    target.style.transform = 
     'translate(' + x + 'px, ' + y + 'px)'; 

    // update the posiion attributes 
    target.setAttribute('data-x', x); 
    target.setAttribute('data-y', y); 

：すべてのドラッグ移動イベントでは、彼らは次の関数を使用します。しかし、その位置にある要素を再描画できるようにしたい。私は次のように試しました：

var parent = event.currentTarget; 
       var xCoord = parent.getAttribute('data-x'); 
       var yCoord = parent.getAttribute('data-y'); 
       $("#testDiv").css({top: parseInt(xCoord + event.dx, 10), left: parseInt(yCoord + event.dy, 10), position: 'absolute'}); 

これはパディングを設定しており、正しい位置には入れません。 data-xとdata-yを使用してdiv/imageを配置するにはどうすればよいですか？

Answer 1

親 からパディングを削除するか、ここで説明するようにパディングを測定：jQuery How to Get Element's Margin and Padding? と彼らは変換 `使用あなたの#testdivのマージン