3

HTML5 ネイティブのドラッグ アンド ドロップを使用しています。

親コンテナに対するドラッグ可能な要素の位置を見つけるのに問題があります。

タスクの概要

「位置：相対」divがあり、「ドロップ可能な領域」と見なされます。この div 内には、ドラッグ可能としてマークした「位置: 絶対」画像要素がいくつかあります。これらの画像をユーザーが自由に動かせるようにしたい。

要素の位置を設定するために、「dragend」にリスナーがいます。

end top / left 変数は、ピクセルではなくパーセンテージ ベースである必要があります。

現在の試行

以下に私の試みを示します。

draggable.addEventListener('dragend', function (event) {
event.preventDefault();

//Gets the position of the two elements relative to the viewport
var droppableBoundingRect = droppable.getBoundingClientRect();

//Establishes the percentage using the droppable height and width
var draggableXPercentage = ((event.clientX - droppableBoundingRect.left) / droppable.clientWidth) * 100;
var draggableYPercentage = ((event.clientY - droppableBoundingRect.top) / droppable.clientHeight) * 100;

//Set the positional elements of the draggable element
event.target.style.top = draggableYPercentage + "%";
event.target.style.left = draggableXPercentage + "%";
}, false);

そして、ここに私が望んでいたことのJSFiddleがあり、各セグメントが何をすることを期待していたかを示すコメントが付いています:

https://jsfiddle.net/oL8yd9Lr/

たぶん、私は間違った木、間違った森を探しているのでしょう。ガイダンスをいただければ幸いです。

4

1 に答える 1

0

可能な解決策を見つけました。完全ではありませんが、相対位置を取得する方法を説明する必要があります。少しやり過ぎたかもしれませんが、重要な部分をコメントしました。

フィドル

;
(function($, undefined) {
  var dragging;

  $(function() {
    $('.dropzone').on({
      'dragover dragenter': dragover,
      'drop': drop
    }).on({
      'dragstart': dragstart,
      'dragend': dragend
    }, '.drag');
  });

  function dragstart(e) {
    e.stopPropagation();
    var dt = e.originalEvent.dataTransfer;
    if (dt) {
      dt.effectAllowed = 'move';
      dt.setData('text/html', '');
      dragging = $(this);
      // Set the position of the mouse relative to the element at 0,0
      dt.setDragImage(dragging.get(0), 0, 0);
    }
  }

  function dragover(e) {
    e.stopPropagation();
    e.preventDefault();
    var dt = e.originalEvent.dataTransfer;
    if (dt && dragging) {
      dt.dropEffect = 'move';
      dragging.hide(); // Hide the element while dragging
    }
    return false;
  }

  function drop(e) {
    e.stopPropagation();
    e.preventDefault();
    if (dragging) {
      var dropzone = $(this);
      // Get the offset of the dropzone relative to the window
      var offset = dropzone.offset();
      // Set the offset of the drag relative to the dropzone
      dragging.css({
        'top': e.clientY - offset.top,
        'left': e.clientX - offset.left
      });
      dragging.trigger('dragend'); // Trigger the dragend
    }
    return false;
  }

  function dragend(e) {
    if (dragging) {
      dragging.show();
      dragging = undefined;
    }
  }
}(jQuery));
于 2016-03-26T18:14:44.097 に答える