1

我想将一个项目（'drag'）从一个 div（'original'）拖到另一个（'target'），并将 div 重新设置为目标 div。

我希望在重新育儿时“拖动”到它所在的位置。（您正在从 div 1 中拉出贴纸并将其放在 div 2 上：当我将鼠标向上时，它会落在它所在的位置）。

当我使用下面的代码尝试此操作时，“拖动”根据其相对于“原始”的位置将自身定位在“目标”中。例如，如果当我放下它时，“拖动”是“原始”的 (300, 300)，在重新育儿时，它将转到“目标”的 (300, 300) （这会导致跳转 b/c 的“目标”和'original' 的左上角不同）。

从长远来看，“原始” 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