js拖拽制作网页插件（js怎么实现一个拖拽事件）

：暂无数据 2026-03-27 01:40:01 ：0

关于js拖拽制作网页插件，有一个概念至关重要，那就是js怎么实现一个拖拽事件。它为何如此重要？且听我们慢慢道来。

本文目录

js怎么实现一个拖拽事件
jquery或JS拖动DIV左右移动
关于js拖拽
js怎么实现页面元素的拖拽功能
js动态添加div并实现鼠标拖动
简单拖拽即生成网页 VvvebJs
使用js+css做一个仿照安卓手机桌面菜单，可以拖动排序、合并菜单的网页
如何用javascript实现div在页面上拖动的效果
js实现div的拖拽

js怎么实现一个拖拽事件

Javascript的特点是dom的处理与网页效果，大多数情况我们只用到了这个语言的最简单的功能，比如制作图片轮播/网页的tab等等，这篇文章将向你展示如何在自己的网页上制作拖拽．
有很多理由让你的网站加入拖拽功能，最简单的一个是数据重组．例如：你有一个序列的内容让用户排序，用户需要给每个条目进行输入或者用select 选择，替代前面这个方法的就是拖拽．或许你的网站也需要一个用户可以拖动的导航窗口！那么这些效果都是很简单：因为你可以很容易的实现！
网页上实现拖拽其实也不是很复杂．第一你需要知道鼠标坐标，第二你需要知道用户鼠标点击一个网页元素并实现拖拽，最后我们要实现移动这个元素．
获取鼠标移动信息
第一我们需要获取鼠标的坐标．我们加一个用户函数到document.onmousemove就可以了:
Java代码收藏代码
document.onmousemove = mouseMove;

function mouseMove(ev){
ev = ev || window.event;
var mousePos = mouseCoords(ev);
}

function mouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
你首先要声明一个evnet对象．不论何时你移动鼠标／点击／按键等等，会对应一个event的事件．在Internet Explorer里event是全局变量，会被存储在window.event里．在firefox中，或者其他浏览器，event事件会被相应的自定义函数获取．当我们将mouseMove函数赋值于document.onmousemove，mouseMove会获取鼠标移动事件．
(ev = ev || window.event) 这样让ev在所有浏览器下获取了event事件，在Firefox下"||window.event"将不起作用，因为ev已经有了赋值．在MSIE下ev是空的，所以ev将设置为window.event.
因为我们在这篇文章中需要多次获取鼠标坐标，所以我们设计了mouseCoords这个函数，它只包含了一个参数，就是the event.
我们需要运行在MSIE与Firefox为首的其他浏览器下．Firefox以event.pageX和event.pageY来代表鼠标相应于文档左上角的位置．如果你有一个500*500的窗口，而且你的鼠标在正中间，那么paegX和pageY将是250，当你将页面往下滚动500px，那么 pageY将是750.此时pageX不变，还是250.
MSIE和这个相反，MSIE将event.clientX与event.clientY来代表鼠标与ie窗口的位置，并不是文档．当我们有一个 500*500的窗口，鼠标在正中间，那么clientX与clientY也是250，如果你垂直滚动窗口到任何位置，clientY仍然是250，因为相对ie窗口并没有变化．想得到正确的结果，我们必须加入scrollLeft与scrollTop这两个相对于文档鼠标位置的属性．最后，由于MSIE 并没有0,0的文档起始位置，因为通常会设置2px的边框在周围，边框的宽度包含在document.body.clientLeft与 clientTop这两个属性中，我们再加入这些到鼠标的位置中．
很幸运，这样mouseCoords函数就完成了，我们不再为坐标的事操心了．
捕捉鼠标点击
下次我们将知道鼠标何时点击与何时放开．如果我们跳过这一步，我们在做拖拽时将永远不知道鼠标移动上面时的动作，这将是恼人的与违反直觉的．
这里有两个函数帮助我们:onmousedown与onmouseup.我们预先设置函数来接收document.onmousemove，这样看起来很象我们会获取document.onmousedown与document.onmouseup．但是当我们获取 document.onmousedown时，我们同时获取了任何对象的点击属性如:text,images,tables等等.我们只想获取那些需要拖拽的属性，所以我们设置函数来获取我们需要移动的对象．
移动一个元素
我们知道了怎么捕捉鼠标移动与点击．剩下的就是移动元素了．首先，要确定一个明确的页面位置，css样式表要用’absolute’.设置元素绝对位置意味着我们可以用样式表的.top和.left来定位，可以用相对位置来定位了．我们将鼠标的移动全部相对页面top-left，基于这点，我们可以进行下一步了．
当我们定义item.style.position=’absolute’，所有的操作都是改变left坐标与top坐标，然后它移动了．
Java代码收藏代码
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;

var dragObject = null;
var mouseOffset = null;

function getMouseOffset(target, ev){
ev = ev || window.event;

var docPos = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function getPosition(e){
var left = 0;
var top = 0;

while (e.offsetParent){
left += e.offsetLeft;
top += e.offsetTop;
e = e.offsetParent;
}

left += e.offsetLeft;
top += e.offsetTop;

return {x:left, y:top};
}

function mouseMove(ev){
ev = ev || window.event;
var mousePos = mouseCoords(ev);

if(dragObject){
dragObject.style.position = ’absolute’;
dragObject.style.top = mousePos.y - mouseOffset.y;
dragObject.style.left = mousePos.x - mouseOffset.x;

return false;
}
}
function mouseUp(){
dragObject = null;
}

function makeDraggable(item){
if(!item) return;
item.onmousedown = function(ev){
dragObject = this;
mouseOffset = getMouseOffset(this, ev);
return false;
}
}
你会注意到这个代码几乎是前面的全集，将前面的合在一起就实现了拖拽效果了．
当我们点击一个item时，我们就获取了很多变量，如鼠标位置，鼠标位置自然就包含了那个item的坐标信息了．如果我们点击了一个20*20px图像的正中间，那么鼠标的相对坐标为{x:10,y:10}．当我们点击这个图像的左上角那么鼠标的相对坐标为 {x:0,y:0}.当我们点击时，我们用这个方法取得一些鼠标与图片校对的信息．如果我们不能加载页面item，那么信息将是document信息，会忽略了点击的item信息．
mouseOffset函数使用了另一个函数getPosition.getPosition的作用是返回 item相对页面左上角的坐标，如果我们尝试获取item.offsetLeft或者item.style.left，那么我们将取得item相对与父级的位置，不是整个document．所有的脚本我们都是相对整个document，这样会更好一些．
为了完成getPosition任务，必须循环取得item的父级，我们将加载内容到item的左／上的位置．我们需要管理想要的top与left列表．
自从定义了mousemove这个函数，mouseMove就会一直运行．第一我们确定item的 style.position为absolute，第二我们移动item到前面定义好的位置．当mouse点击被释放，dragObject被设置为 null，mouseMove将不在做任何事．
Dropping an Item
前面的例子目的很简单，就是拖拽item到我们希望到的地方．我们经常还有其他目的如删除item，比如我们可以将item拖到垃圾桶里，或者其他页面定义的位置．
很不幸，我们有一个很大的难题，当我们拖拽，item会在鼠标之下，比如mouseove,mousedown,mouseup或者其他mouse action．如果我们拖拽一个item到垃圾桶上，鼠标信息还在item上，不在垃圾桶上．
怎么解决这个问题呢？有几个方法可以来解决．第一，这是以前比较推荐的，我们在移动鼠标时item会跟随鼠标，并占用了mouseover/mousemove等鼠标事件，我们不这样做，只是让item跟随着鼠标，并不占用mouseover等鼠标事件，这样会解决问题，但是这样并不好看，我们还是希望item能直接跟在mouse下．
另一个选择是不做item的拖拽．你可以改变鼠标指针来显示需要拖拽的item，然后放在鼠标释放的位置．这个解决方案，也是因为美学原因不予接受．
最后的解决方案是，我们并不去除拖拽效果．这种方法比前两种繁杂许多，我们需要定义我们需要释放目标的列表，当鼠标释放时，手工去检查释放的位置是否是在目标列表位置上，如果在，说明是释放在目标位置上了．
Java代码收藏代码
/*
All code from the previous example is needed with the exception
of the mouseUp function which is replaced below
*/

var dropTargets = ;

function addDropTarget(dropTarget){
dropTargets.push(dropTarget);
}

function mouseUp(ev){
ev = ev || window.event;
var mousePos = mouseCoords(ev);

for(var i=0; i《dropTargets.length; i++){
var curTarget = dropTargets;
var targPos = getPosition(curTarget);
var targWidth = parseInt(curTarget.offsetWidth);
var targHeight = parseInt(curTarget.offsetHeight);

if(
(mousePos.x 》 targPos.x) &&

(mousePos.x 《 (targPos.x + targWidth)) &&
(mousePos.y 》 targPos.y) &&
(mousePos.y 《 (targPos.y + targHeight))){
// dragObject was dropped onto curTarget!
}
}

dragObject = null;
}
鼠标释放时会去取是否有drop属性，如果存在，同时鼠标指针还在drop的范围内，执行drop操作．我们检查鼠标指针位置是否在目标范围是用(mousePos.x》targetPos.x)，而且还要符合条件(mousePos.x《(targPos.x + targWidth))．如果所有的条件符合，说明指针确实在范围内，可以执行drop指令了．
Pulling It All Together
最后我们拥有了所有的drag/drop的脚本片断！下一个事情是我们将创建一个DOM处理．
下面的代码将创建container(容器),而且使任何一个需要drag/drop的item变成一个容器的item.代码在这个文章第二个demo的后面，它可以用户记录一个list(列表)，定为一个导航窗口在左边或者右边，或者更多的函数你可以想到的．
下一步我们将通过"假代码"让reader看到真代码，下面为推荐:
1、当document第一次载入时，创建dragHelper DIV.dragHelper将给移动的item加阴影．真实的item没有被dragged，只是用了insertBefor和appendChild来移动了，我们隐藏了dragHelper
2、有了mouseDown与mouseUp函数．所有的操作会对应到当到iMouseDown的状态中，只有当mouse左键为按下时iMouseDown才为真，否则为假．
3、我们创建了全局变量DragDrops与全局函数CreateDragContainer.DragDrops包含了一系列相对彼此的容器．任何参数(containers)将通过CreatedcragContainer进行重组与序列化，这样可以自由的移动．CreateDragContainer函数也将item进行绑定与设置属性．
4、现在我们的代码知道每个item的加入，当我们移动处mouseMove，mouseMove函数首先会设置变量target，鼠标移动在上面的item，如果这个item在容器中(checked with getAttribute):
* 运行一小段代码来改变目标的样式．创造rollover效果
* 检查鼠标是否没有放开，如果没有
o 设置curTarget代表当前item
o 记录item的当前位置，如果需要的话，我们可以将它返回
o 克隆当前的item到dragHelper中，我们可以移动带阴影效果的item.
o item拷贝到dragHelper后，原有的item还在鼠标指针下，我们必须删除掉dragObj，这样脚本起作用，dragObj被包含在一个容器中．
o 抓取容器中所有的item当前坐标，高度/宽度，这样只需要记录一次，当item被drag时，每随mouse移动，每移钟就会记录成千上万次．
* 如果没有，不需要做任何事，因为这不是一个需要移动的item
5、检查curTarget，它应该包含一个被移动的item,如果存在，进行下面操作：
* 开始移动带有阴影的item，这个item就是前文所创建的
* 检查每个当前容器中的container，是否鼠标已经移动到这些范围内了
o 我们检查看一下正在拖动的item是属于哪个container
o 放置item在一个container的某一个item之前，或者整个container之后
o 确认item是可见的
* 如果鼠标不在container中，确认item是不可见了．

jquery或JS拖动DIV左右移动

《html》
《head》
《title》jquery或JS拖动DIV左右移动《/title》
《script src="jquery-1.7.1.min.js"》《/script》
《style type="text/css"》
    body {background-color: #fff; }
    .win {position: absolute; top: 0px; left: 0px;width: 300px;height: 222px;}
    .title {height: 20px;width: 300px;  position: absolute;background-color: #0094ff; float: inherit; top: 0px; left: 0px; }
    .winCon { height: 200px;width: 298px; position: absolute; border: solid;
              border-width: 1px; border-color: #0094ff; border-top: none;  float: inherit; left: 0px; top: 20px; }
《/style》
《/head》
《body onload="showDiv(this,’test1’);"》
《/body》
《script type="text/javascript"》
    function showDiv(element, str) {
        $(document.body).append("《div class=’win’ id=’win" + str + "’》《div class=’title’ id=’" + str + "’》《/div》《div class=’winCon’》清新自在《/div》《/div》");
        $("#" + str).mousedown(function (event) {
            var offset = $(this).offset();
            _x = event.clientX - offset.left;
            _y = event.clientY + 20 - offset.top;
            $("#win" + str).css({ "top": offset.top - 20 + "px" });
            $("#win" + str).mousemove(function (event) {
                _xx = event.clientX - _x;
                _yy = event.clientY - _y;
                this.style.left = _xx + "px";
                this.style.top = _yy + "px";
                this.style.zIndex = "100";
                return false;
            });
            return false;
        });
        $("#win" + str).mouseup(function () {
            $(this).unbind("mousemove");
            $(this).css({ "z-index": "-1" });
            return false;
        });
    }
《/script》
《/html》

关于js拖拽

js怎么实现页面元素的拖拽功能

js实现一个拖拽事件的方法：
1、定义HTML
《div id="no-drop" class="draggable drag-drop"》 #无拖动《/div》
《div id="yes-drop" class="draggable drag-drop"》 #有拖动《/div》
《div id="outer-dropzone" class="dropzone"》
#外层拖动
《div id="inner-dropzone" class="dropzone"》#内层拖动《/div》
《/div》
2、定义css
/* 外层样式定义 */
#outer-dropzone {
height: 140px;
}
#inner-dropzone {
height: 80px;
}
.dropzone {
background-color: #ccc;
border: dashed 4px transparent;
border-radius: 4px;
margin: 10px auto 30px;
padding: 10px;
width: 80%;
transition: background-color 0.3s;
}
.drop-active {
border-color: #aaa;
}
.drop-target {
background-color: #29e;
border-color: #fff;
border-style: solid;
}

js动态添加div并实现鼠标拖动

newDiv=createElement("div");//动态创建DIV
newDIV.width=600px;
....//这里是div的属性定义
......
document.getElementsByTagName("body").appendChild(newDiv);//添加到body里
..
div的拖动通过绑定onmousedown 和onmousemove 和 onmouseup 事件,获取鼠标当前坐标,经过计算后设置DIV的posision就可以了

简单拖拽即生成网页 VvvebJs

VvvebJs是一个开源的网页拖拽自动生成的JavaScript库，你可以以简单拖拽的方式生成自己需要的网页样式，内置jquery和Bootstrap，你可以拖拽相关的组件进行网页的构建，非常的方便，而且可以实时修改代码，功能丰富，使用简单，界面友好，特别适合一些专注于展示的网页设计，需要的朋友不可错过！

***隐藏网址***

相关特性

1、组件和块/片段拖放;

2、撤销/重做操作;

3、一个或两个面板界面;

4、文件管理器和组件层次结构导航添加新页面;

5、实时代码器;

6、包含示例php脚本的图像上传;

7、页面下载或导出html或保存页面在服务器上包含示例PHP脚本;

8、组件/块列表搜索;

9、Bootstrap 4组件等组件。

默认情况下，器附带Bootstrap 4和Widgets组件，可以使用任何类型的组件和输入进行扩展。

使用方式

要初始化器，调用Vvveb.Builder.init。第一个参数是要加载以进行的URL，它必须位于相同的子域中才能进行。第二个参数是页面加载完成时调用的函数，默认情况下调用器Gui.init();

结构

Component Group是一个组件集合，例如Bootstrap 4组由Button和Grid等组件组成，该对象仅用于在器左侧面板中对组件进行分组。例如，Widgets组件组只有两个组件视频和地图，并被定义为如下

Component是一个对象，它提供可以在画布上放置的html以及在选择组件时可以的属性，例如Video Component，具有Url和Target属性的html链接Component定义为：

在Component属性集合中使用Input对象来属性，例如文本输入，选择，颜色，网格行等。例如，TextInput扩展Input对象并定义为：

输入还需要一个在器html（在editor.html中）定义为以上是借助浏览器翻译工具，对官网的文档进行简单的翻译，可能会有些不够准确的地方，感兴趣的小伙伴可以直接查看相关文档！

设计界面预览

总结

VvvebJs是一个非常强大的网页可视化生成构建工具，让不懂网页设计的小伙伴们也能够通过拖拽来生成美观大方的网页出来，让设计网页就像设计图片一样，VvvebJs特别适合展示型网页，甚至可以不需要代码就能完成一项复杂的网页设计，总体来说，VvvebJs是一个值得尝试的工具！

***隐藏网址***

使用js+css做一个仿照安卓手机桌面菜单，可以拖动排序、合并菜单的网页

拖动到一个div里这个jq ui有例子就不说了，重点就是拖进去后样式的变化，就是在原件拖入后，那么1个元素变2个了，就必须在他们的2个元素外城wrap一个div 给包着。然后用css 修改里面元素的样式：大小，以及元素间的间距.

《style》
.bao,.box{width:60px;height:60px;position:absolute;}
.bao .box{width:20px;height:20px;position:relative;display:inline-block;margin:5px;}
《/style》
《div class="box box1"》《/div》
《div class="bao"》
《div class="box box2"》《/div》
《div class="box box3"》《/div》
《/div》

大概就是这样的一个思路

如何用javascript实现div在页面上拖动的效果

《html》
《head》《title》拖动效果函数演示 by Longbill.cn《/title》
《style》
body
{
font-size:12px;
color:#333333;
border : 0px solid blue;
}
div
{
position : absolute;
background-color : #c3d9ff;
margin : 0px;
padding : 5px;
border : 0px;
width : 100px;
height:100px;
}
《/style》
《/head》
《body》
《script》
function drag(o,s)
{
if (typeof o == "string") o = document.getElementById(o);
o.orig_x = parseInt(o.style.left) - document.body.scrollLeft;
o.orig_y = parseInt(o.style.top) - document.body.scrollTop;
o.orig_index = o.style.zIndex;

o.onmousedown = function(a)
{
this.style.cursor = "move";
this.style.zIndex = 10000;
var d=document;
if(!a)a=window.event;
var x = a.clientX+d.body.scrollLeft-o.offsetLeft;
var y = a.clientY+d.body.scrollTop-o.offsetTop;
//author: www.longbill.cn
d.ondragstart = "return false;"
d.***electstart = "return false;"
d.***elect = "document.selection.empty();"

if(o.setCapture)
o.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove = function(a)
{
if(!a)a=window.event;
o.style.left = a.clientX+document.body.scrollLeft-x;
o.style.top = a.clientY+document.body.scrollTop-y;
o.orig_x = parseInt(o.style.left) - document.body.scrollLeft;
o.orig_y = parseInt(o.style.top) - document.body.scrollTop;
}
d.onmouseup = function()
{
if(o.releaseCapture)
o.releaseCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove = null;
d.onmouseup = null;
d.ondragstart = null;
d.***electstart = null;
d.***elect = null;
o.style.cursor = "normal";
o.style.zIndex = o.orig_index;
}
}

if (s)
{
var orig_scroll = window.***croll?window.***croll:function (){};
window.***croll = function ()
{
orig_scroll();
o.style.left = o.orig_x + document.body.scrollLeft;
o.style.top = o.orig_y + document.body.scrollTop;
}
}
}
《/script》
《div id="div1" style="left:10px;top:10px;"》div1:我可以被拖动《/div》
《div id="div2" style="left:120px;top:10px;background-color : #f3d9ff"》div2:来拖我呀《/div》
《div id="div3" style="left:230px;top:10px;background-color : #c3ffff"》div3:我随便你拖《/div》
《div id="div4" style="left:10px;top:120px;background-color : #c3d944"》div4:我可以随窗口滑动，把我拖到最下面，然后滚动网页看看《/div》
《div id="div5" style="left:120px;top:120px;background-color : #f3d944"》作者: Longbill
***隐藏网址***
《/div》
《div id="div6" style="left:230px;top:120px;background-color : #e3f944;width:200px;"》参数说明:

drag(obj );

obj:对象的id或对象本身;

scroll(可选):对象是否随窗口拖动而滑动，默认为否

鼠标右键查看源代码
《/div》
《script》
drag("div1");
drag("div2");
drag("div3");
drag("div4",1);
drag("div5",1);
drag("div6",1);
《/script》
《/body》

js实现div的拖拽

《div id="c" onmousedown="mm(event);"》123123《/div》
evt参数是就是上面的event对象;
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
因为火狐不支持直接获取event对象.因此FF在触发拖拽事件前需要明确传递event.
IE则不需要.所以才出现 e = evt || event; 主要是兼容所用.
e.clientX是获取当前鼠标的横坐标.

理解js怎么实现一个拖拽事件，是打开js拖拽制作网页插件大门的第一把钥匙。现在，钥匙在你手中了。

本文编辑：admin

： js拖拽制作网页插件

上一篇：sql server解压安装教程（安装**L Server2008时，出现“查找**L Server2008 安装媒体”怎么解决啊）

下一篇：excel表格怎么输入函数公式（excel表格乘法公式怎么输入 excel怎么输入乘法公式）

js拖拽制作网页插件（js怎么实现一个拖拽事件）

本文目录

更多文章：