前端 javascript 开发语言 ecmascript 详解HTML中的拖拽案例和难点分析

var resizableElement = document.getElementById("resizable-element");

var initialWidth, initialHeight;

resizableElement.addEventListener("dragstart", function(event) {

  initialWidth = parseFloat(getComputedStyle(resizableElement).width);

  initialHeight = parseFloat(getComputedStyle(resizableElement).height);

});

resizableElement.addEventListener("drag", function(event) {

  var deltaX = event.clientX - event.screenX;

  var deltaY = event.clientY - event.screenY;

  var newWidth = initialWidth + deltaX;

  var newHeight = initialHeight + deltaY;

  resizableElement.style.width = newWidth + "px";

  resizableElement.style.height = newHeight + "px";

});

在上述代码中，我们创建了一个可拖拽放大缩小的元素。在拖拽开始时，我们记录了元素的初始宽度和高度。在拖拽过程中，我们根据鼠标移动的距离调整元素的宽度和高度。

3、拖拽放置到容器

允许用户将拖拽元素放置到指定的容器中。例如，您可以创建一个可拖拽的购物车，用户可以将商品拖放到购物车中。

Drag me

Drop here

var draggableElement = document.getElementById("draggable-element");

var dropzone = document.getElementById("dropzone");

draggableElement.addEventListener("dragstart", function(event) {

  event.dataTransfer.setData("text/plain", event.target.id);

});

dropzone.addEventListener("dragover", function(event) {

  event.preventDefault();

  event.dataTransfer.dropEffect = "move";

  dropzone.classList.add("dragover");

});

dropzone.addEventListener("dragleave", function(event) {

 var dropzone = document.getElementById("dropzone");

  dropzone.classList.remove("dragover");

});

dropzone.addEventListener("drop", function(event) {

  event.preventDefault();

  var draggedItemId = event.dataTransfer.getData("text/plain");

  var draggedItem = document.getElementById(draggedItemId);

  dropzone.appendChild(draggedItem);

  dropzone.classList.remove("dragover");

});

#dropzone {

  width: 200px;

  height: 200px;

  background-color: lightgray;

}

#dropzone.dragover {

  background-color: lightblue;

}

在上述代码中，我们创建了一个可拖拽的元素和一个放置区域。在拖拽开始时，我们使用event.dataTransfer.setData()方法设置拖拽数据为被拖拽元素的ID。在dragover事件中，我们阻止默认行为，并添加相应的样式来指示可以放置。在drop事件中，我们获取拖拽数据并将被拖拽元素放置到放置区域中。

4、拖拽改变布局

通过拖拽元素的边缘或分隔线，实现改变布局的效果。例如，您可以创建一个可拖拽的面板，用户可以调整面板的大小或重新排列面板的位置。

Panel 1

Panel 2

Panel 3

var panels = document.querySelectorAll("[draggable=true]");

var initialX, initialY;

panels.forEach(function(panel) {

  panel.addEventListener("dragstart", function(event) {

    initialX = event.clientX;

    initialY = event.clientY;

  });

  panel.addEventListener("drag", function(event) {

    var deltaX = event.clientX - initialX;

    var deltaY = event.clientY - initialY;

    var newX = panel.offsetLeft + deltaX;

    var newY = panel.offsetTop + deltaY;

    panel.style.left = newX + "px";

    panel.style.top = newY + "px";

    initialX = event.clientX;

    initialY = event.clientY;

  });

});

div {

  position: absolute;

  background-color: lightblue;

  width: 200px;

  height: 200px;

  cursor: move;

}

在上述代码中，我们创建了可拖拽的面板。在拖拽开始时，我们记录了鼠标的初始位置。在拖拽过程中，我们根据鼠标移动的距离调整面板的位置，并更新初始位置。

5、拖拽文件上传

允许用户将文件拖拽到指定区域进行上传。这在文件管理器或图片上传功能中常见。

Drop files here

var dropzone = document.getElementById("dropzone");

dropzone.addEventListener("dragover", function(event) {

  event.preventDefault();

  event.dataTransfer.dropEffect = "copy";

  dropzone.classList.add("dragover");

});

dropzone.addEventListener("dragleave", function(event) {

  dropzone.classList.remove("dragover");

});

dropzone.addEventListener("drop", function(event) {

  event.preventDefault();

  var files = event.dataTransfer.files;

  // Handle the dropped files

  for (var i = 0; i < files.length; i++) {

    var file = files[i];

    console.log("File name: " + file.name);

    console.log("File size: " + file.size + " bytes");

    console.log("File type: " + file.type);

    // Perform file upload or any other desired operation

  }

  dropzone.classList.remove("dragover");

});

在上述代码中，我们创建了一个可拖拽文件上传的区域。在dragover事件中，我们阻止默认行为，并设置拖放效果为复制，并添加相应的样式。在drop事件中，我们获取拖拽的文件列表，并可以在控制台中打印文件的名称、大小和类型等信息。您可以根据需求执行文件上传或其他操作。

6、拖拽切换视图

通过拖拽元素或手势，实现切换不同视图或页面的效果。这常见于图片浏览器或轮播图组件。

View 1

View 2

var view1 = document.getElementById("view1");

var view2 = document.getElementById("view2");

var container = document.getElementById("container");

view1.addEventListener("dragstart", function(event) {

  event.dataTransfer.setData("text/plain", "view1");

});

view2.addEventListener("dragstart", function(event) {

  event.dataTransfer.setData("text/plain", "view2");

});

container.addEventListener("dragover", function(event) {

  event.preventDefault();

  event.dataTransfer.dropEffect = "move";

  container.classList.add("dragover");

});

container.addEventListener("dragleave", function(event) {

  container.classList.remove("dragover");

});

container.addEventListener("drop", function(event) {

  event.preventDefault();

  var draggedView = event.dataTransfer.getData("text/plain");

  // Switch views based on the dragged view

  if (draggedView === "view1") {

    // Switch to View 1

    container.innerHTML = view1.outerHTML;

  } else if (draggedView === "view2") {

    // Switch to View 2

    container.innerHTML = view2.outerHTML;

  }

  container.classList.remove("dragover");

});

在上述代码中，我们创建了两个可拖拽的视图和一个容器。在拖拽开始时，我们使用event.dataTransfer.setData()方法设置拖拽数据为视图的标识符（例如"view1"和"view2"）。在容器上的dragover事件中，我们阻止默认行为，并设置拖放效果为移动，并添加相应的样式。在drop事件中，我们获取拖拽数据并根据拖拽的视图切换容器的内容。

7、拖拽画布

通过拖拽画布或拖动手势，在一个大的画布或地图上进行导航。这在地图应用程序或可缩放的图像编辑器中常见。

上述代码创建了一个带有固定大小的画布（

上述代码创建了一个可拖拽的元素（.draggable）和一个可放置的容器（.droppable）。当您拖拽元素时，按住鼠标并移动时，将显示拖动的效果。当您将拖拽元素放置到.droppable容器中时，会创建元素的副本。您可以按住Ctrl键（Windows / Linux）或Option/Alt键（Mac）来实现复制效果。

请注意，这只是一个基本的示例，您可以根据自己的需求进行修改和扩展。在实际应用中，您可能需要处理更复杂的逻辑和界面交互，并根据需要调整样式和布

    拖拽我

上面的代码创建了一个可拖拽的元素（.draggable）和一个可放置的容器（.droppable）。通过设置draggable属性为true，使元素可拖拽。当您拖拽元素时，按住鼠标并移动时，会显示拖动的效果。当您将拖拽元素放置到.droppable容器中时，会创建元素的副本。这个示例还演示了通过按下特定键（Ctrl键）来实现元素的复制效果。

这些只是一些常见的拖拽交互效果的例子。实际上，您可以根据具体需求和 kreativity 进一步创造各种各样的交互效果。通过组合使用HTML中的拖拽属性和事件，结合JavaScript和CSS的强大功能，您可以实现非常丰富和多样化的拖拽交互体验。

文章链接