如何使用JavaScript从头开始实现拖放式div？ [英] How to implement a drag-and-drop div from scratch with JavaScript?

问题描述

它应该是CSS和JavaScript的组合。要执行的步骤应该是：

1. 将其放在所有其他元素之上（哪个属性要具体？）


2. 抓住点击的事件（哪个事件要听？）


3. 将鼠标移动时移动div。

但是有什么细节？

解决方案

jQuery方式：

查看 jQueryUI 插件 draggable 和 droppable 。

在jQuery框架中投入了数百小时的时间，使这样的复杂任务变得微不足道。利用jQuery团队的努力，使编程丰富的跨浏览器应用程序在我们所有人更容易;）

Chuck Norris的方式：

如果你坚持用原始的javascript来尝试这个。你会想做一些事情。一个，以编程方式将所有可拖动项目设置为相对/绝对定位。如果您单击某个特定项目，则会导致CSS中的顶部/左侧值反映鼠标的x，y轴所做的更改，直到单击被释放。此外，您需要更新每个draggable的z-index，当它被点击以使其进入视图。

教程：如何使用Javascript进行拖放

It should be a combination of CSS and JavaScript. The steps to do should be:

1. Make it on top of all other elements (which property to specity?)
2. Catch the event it is clicked (which event to listen to?)
3. Move the div as mouse moves.

But what are the details?

解决方案

The jQuery Way:

Check out the jQueryUI addons draggable and droppable.

Literally hundreds of hours have been invested into the jQuery framework to make complicated tasks like this almost trivial. Take advantage of the jQuery team's efforts to make programming rich cross-browser applications easier on us all ;)

Chuck Norris' Way:

If you insist on trying this with raw javascript. You'll want to do a few things. One, programmatically set all draggable items to a relative/absolute positioning. If you click a particular item, cause it's top/left values in CSS to reflect the changes made by the x,y axis of the mouse until the click is released. Additionally, you'll want to update the z-index of each draggable when it's clicked to bring it into view.

Tutorial: How to Drag and Drop with Javascript

这篇关于如何使用JavaScript从头开始实现拖放式div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！