1

ある div (「オリジナル」) から別の div (「ターゲット」) にアイテムをドラッグ (「ドラッグ」) し、div をターゲット div に再親化したいと考えています。

親の再設定時に「ドラッグ」して、配置されている場所に着陸させたいと思います。(div 1 からステッカーを引っ張って div 2 に配置します。マウスを離すと、その場所に着地します)。

以下のコードでこれを試すと、「ドラッグ」は「オリジナル」に対する相対的な位置に基づいて「ターゲット」に配置されます。たとえば、ドロップしたときに「ドラッグ」が「オリジナル」から (300, 300) ずれている場合、親を再設定すると、「ターゲット」から (300, 300) ずれます (これにより、「ターゲット」と b/c のジャンプが発生し、 「オリジナル」には同じ左上隅がありません)。

長期的には、「元の」div はかなり複雑になる可能性があります (たとえば、ステッカーのスクロール パネルやタブなど)。

ドロップするときに「ターゲット」と「ドロップ」のグローバル位置に基づいてある種の複雑な数学を試してみましたが、1) マージン、パディング、スケーリングなどに直面して正しく取得するのは苦痛です。 ）および2）これは簡単だと思います。アイテムがドロップされた場所にとどまるというのは、かなり基本的な期待のようです。

コード：

<!DOCTYPE html>
<html>
<head>
    <title>Test Drop</title>

    <script src="libraries/javascript/third_party/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="libraries/javascript/third_party/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>

    <script type="text/javascript" charset="utf-8">

      $(document).ready(function() {
          var $dest = $('#destinationDiv');
          var $src = $('#originalDiv');
          var $drag = $('#draggableDiv');

          $dest.droppable({accept: '#draggableDiv',
                  drop: function(event, ui) {
                    $dest.append(ui.draggable);
                  },
                  tolerance: 'fit',
          });
          $drag.draggable({appendTo: '#destinationDiv',
           // helper: 'clone',
            revert: 'invalid',
            revertDuration: 100,
          });
      });

    </script>

    <style>
        #destinationDiv {
            position:absolute;
            width: 500px;
            height: 500px;
            background: #cccccc;
            border:solid;
            top: 50px;
            left: 50px;
        }
        #originalDiv {
            position:absolute;
            width: 200px;
            height: 200px;
            top: 30px;
            left: 30px;
            background: #ddccff;
            border:solid;
        }
        #draggableDiv {
            position:absolute;
            width: 100px;
            height: 100px;
            top: 10px;
            left: 10px;
            background: #ccffdd;
            border:solid;
        }
    </style>

</head>
<body>
<div id=destinationDiv>
    <div id=originalDiv>
        <div id=draggableDiv></div>
    <div>
<div>
</body>
</html>
4

0 に答える 0