如何使用 JavaScript 从头开始​​实现拖放 div?

How to implement a drag-and-drop div from scratch with JavaScript?(如何使用 JavaScript 从头开始​​实现拖放 div?)
本文介绍了如何使用 JavaScript 从头开始​​实现拖放 div?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

它应该是 CSS 和 JavaScript 的组合.要做的步骤应该是:

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

  1. 将其置于所有其他元素之上(指定哪个属性?)
  2. 点击事件时捕捉事件(监听哪个事件?)
  3. 在鼠标移动时移动 div.

但是细节是什么?

推荐答案

jQuery之道:

查看 jQueryUI 插件 可拖拽和可拖拽.

已经在 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 ;)

如果您坚持使用原始 javascript 进行尝试.你会想做一些事情.一,以编程方式将所有可拖动项目设置为相对/绝对定位.如果单击特定项目,请使其在 CSS 中的顶部/左侧值反映鼠标 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 拖放

这篇关于如何使用 JavaScript 从头开始​​实现拖放 div?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)