如何从头开始实现拖放div？ [英] how to implement a drag-and-drop div from scratch?

问题描述

它应该是CSS和Javascript的组合，

It should be a combination of CSS and Javascript,

主要工作应该是：

1. 将其置于所有其他元素（属于specity的属性）之上


2. 捕获其被点击的事件li>
   
3. 移动div作为鼠标移动。

但是细节是什么？

推荐答案

jQuery Way：

查看 jQueryUI addons draggable and 可放置。

The jQuery Way:

Check out the jQueryUI addons draggable and droppable.

字面上有数百小时被投入到jQuery框架中，使这样复杂的任务几乎是微不足道的。利用jQuery团队的努力，使编程丰富的跨浏览器应用程序更容易我们所有;）

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 ;)

如果你坚持用raw javascript来尝试这个。你会想做一些事情。一个，以编程方式将所有可拖动项目设置为相对/绝对定位。如果您点击某个特定项目，则它是CSS中的top / left值，以反映鼠标的x，y轴所做的更改，直到点击释放。此外，您需要在点击每个可拖动对象的z-index时将其更新为视图。

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.

教程：如何使用Javascript拖放

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