Question

我想将div拖放到容器div中。使用鼠标仅在列表中上下移动。我该如何创建呢？

搜索互联网和stackoverflow并没有给我一个很好的答案，因为我希望使用香草Javascript编写它，而如今一切都在jQuery中。：S

这是我所拥有的：

<div class="chapcontainer" data-chaporder="1000">
   <div class="chapter">Big fire</div>
     <div class="subchapter" data-chapid="1">Forest burning</div>
     <div class="subchapter" data-chapid="2">Balu hoses</div>
     <div class="subchapter" data-chapid="3">Forest animals die</div>
     <div class="subchapter" data-chapid="4">Lovely fire</div>
   </div>
</div>

章节div是容器。在此div中，我希望能够通过在subchapter-div列表中单击鼠标按钮来上下移动subchapter-div。

例如，我将subchapter-div和data-chapid 4移至顶部，然后应将其移至顶部，并将data-chapid更改为1。在香草javascript中是否可能发生这种情况？

我已经了解了AppendChild，但我不知道如何用鼠标触发它。

Answer 1

您可以使用jQuery：

$(".subchapter[data-chapid='1']").on("click", function() {
    $(this).css('margin-left', '20px') // add margin/padding/etc here
})

Fiddle

Answer 2

进行拖放操作很复杂，但这是一些基本步骤。滚动自己的优势之一是，您可以执行比标准jQuery UI拖放操作更高级的事情，例如，平滑滚动容器，如果用户将鼠标悬停在其上则自动打开嵌套的树项目，或在移动项目时进行动画处理。 / p>

步骤：

收听有关容器中项目的mousedown事件。当用户按下某个项目时，存储鼠标相对于容器顶部的偏移（包括容器的滚动）。还存储鼠标相对于要拖动的项目的偏移量。
使用在步骤1中存储的相对偏移量，克隆要拖动的元素并将其绝对定位在鼠标下。
使原始元素不可见。
听一下容器上的mousemove事件。适当地重新放置拖动的项目。
随着鼠标移动，您需要从顶部更新鼠标的新偏移量（包括滚动条），并确定您要结束的项目。您可以通过获取列表中每个项目的高度来实现。因此，如果您的鼠标距顶部是710像素，并且每个项目的高度都为100像素，那么您将超过索引8。您可以使用此信息来更改要结束的项目的样式，以表明它是放置目标。需要注意的一件事是，如果进行任何样式更改以更改项目的高度，则需要重新计算高度。
在mouseup上，您已经知道要结束的项目，因此现在您可能需要使用array.splice更新数据数组以移动拖动的项目。删除绝对定位的拖动元素，然后重新渲染列表以反映所做的更改。我假设您正在使用某种模板库来渲染您的东西，或者至少使用一个render函数来清除其中的内容并将其替换为当前状态。

Answer 3

我使用draggable =“ true”使div成为可拖动对象，并添加了一些功能（ondragstart，ondrop，ondragover）来启用拖放操作。

<div class="chapcontainer" data-chaporder="1000">
   <div class="chapter">Big fire</div>
     <div class="subchapter" data-chapid="1" draggable="true" ondragstart="dragstart_handler(event);" ondrop="drop_handler(event)" ondragover="dragover_handler(event);">Forest burning</div>
     <div class="subchapter" data-chapid="2" draggable="true" ondragstart="dragstart_handler(event);" ondrop="drop_handler(event)" ondragover="dragover_handler(event);">Balu hoses</div>
     <div class="subchapter" data-chapid="3" draggable="true" ondragstart="dragstart_handler(event);" ondrop="drop_handler(event)" ondragover="dragover_handler(event);">Forest animals die</div>
     <div class="subchapter" data-chapid="4" draggable="true" ondragstart="dragstart_handler(event);" ondrop="drop_handler(event)" ondragover="dragover_handler(event);">Lovely fire</div>
   </div>
</div>

我添加了以下javascript：

function dragstart_handler(ev) {
    console.log("dragStart");
    ev.dataTransfer.setData("text/plain", ev.target.id);
    ev.dataTransfer.dropEffect = "move";
}

function dragover_handler(ev) {
    ev.preventDefault();
    ev.dataTransfer.dropEffect = "move";
}

function drop_handler(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text/plain");
    console.log(data);
    ev.target.appendChild(document.getElementsByClassName(data));
}

现在我又被卡住了。运行代码时，在控制台中出现以下错误：

未捕获的TypeError：无法在“节点”上执行“ appendChild”：参数1的类型不是“节点”。在drop_handler（chapdrag.js：16）处 HTMLDivElement.ondrop（index.html：1）

我在做什么错了？

通过鼠标单击在div容器之间移动div

3 个答案: