`
lovnet
  • 浏览: 6878272 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
文章分类
社区版块
存档分类
最新评论

web拖动Drag&Drop原理

WebIEJavaScriptHTML 
阅读更多
<html>
<head>
<title>PageTitle</title>
<style>...

.drag{...}{
cursor:move;
}



.box{...}{
margin:0px;
width:200px;
border:1pxsolid#ccc;
}
.boxh3.title{...}{
margin:0px;
width:100%;
background-color:#ccc;
}
.boxdiv.content{...}{
margin:0px;
width:100%;
text-align:left;
}
</style>

<scripttype="text/javascript">...
//GreatGhoul
//兼容ff,ie
//要拖动的对象的title设置为'dragable'
//拖动点的class设置为'drag'，拖动点必须为可拖动对象的子节点

varDragableObj=...{
handle:null,
dx:0,
dy:0,

init:function(e)...{
e=e||event;
this.handle=e.target||e.srcElement;
if(this.handle.className.indexOf('drag')==-1)return;
while(this.handle.tagName!='HTML'&&this.handle.title!="dragable")...
{
this.handle=this.handle.parentNode||this.handle.parentElement;
}
if(this.handle.title!='dragable')return;
this.handle.style.position='relative';
this.dx=parseInt(this.handle.style.left+0)-e.clientX;
this.dy=parseInt(this.handle.style.top+0)-e.clientY;
document.onmousemove=DragableObj.drag;
},
drag:function(e)...{
e=e||event;
if(this.handle!=null)...{
this.handle.style.left=(e.clientX+this.dx)+'px';
this.handle.style.top=(e.clientY+this.dy)+'px';
}
},
drop:function(e)...{
this.handle=null;
document.onmousemove=null;
}
};
document.onmousedown=DragableObj.init;
document.onmouseup=DragableObj.drop;
document.onselectstart=function(e)...{
e=e||event;
eo=e.target||event.srcElement;
if(eo.className.indexOf('drag')!=-1)returnfalse;
};

</script>
</head>
<body>
<br>例１：
<divclass="box"title="dragable">
<h3class="dragtitle">拖动标题</h3>
<divclass="content">内容</div>
</div>

<br>例２：
<divclass="drag"title="dragable">拖动我</div>

</body>
</html>
分享到：
| Salvation
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    深度VMware6.0完美精简汉化版+Drag&Drop_FixPatch

    【深度VMware6.0完美精简汉化版+Drag&Drop_FixPatch】是一款针对VMware Workstation 6.0的专业优化版本，它结合了深度定制和汉化，为用户提供更加符合中文用户习惯的操作界面。VMware Workstation是一款强大的虚拟机...

    VMware6.0深度完美汉化版+vmtools+Drag&Drop_FixPatch（1）

    而且我已经把windows和linux的vmtools包，以及解决拖拽的问题脚本Drag&Drop_FixPatch一并加入进来，欢迎大家下载使用。 注意:因为大小问题,我分为两卷: VMware6.0深度完美汉化版+vmtools+Drag&Drop_FixPatch（1） ...

    Drag&Drop VCL for Delphi

    本文将深入探讨Drag&Drop VCL在Delphi中的应用及其核心原理。 首先，我们要理解什么是“拖放”（Drag & Drop）。这是一种常见的用户界面交互方式，用户可以通过鼠标选择一个对象并将其移动到另一个位置，从而完成...

    使用Drag&Drop接受文件名的输入框(13KB)

    "使用Drag&Drop接受文件名的输入框"是一种创新的交互方式，它允许用户通过简单的拖放操作来输入文件路径或文件名，提高了用户体验和工作效率。这种功能在多种应用中都非常实用，比如文件管理器、编辑器或者上传服务...

    WPF listbox之间拖动 drag&drop

    本教程将详细讲解如何在两个`ListBox`之间实现拖放（Drag & Drop）功能，以及如何添加上下按钮来控制`ListBox`内部元素的移动，并在拖动时改变边框颜色，提升用户体验。 首先，我们要了解`ListBox`的基本用法。`...

    HTML5实践Drag&Drop

    3. **drag事件**：拖动过程中持续触发，更新拖动状态。 4. **dragenter事件**：当被拖动的元素进入目标元素时触发。 5. **dragover事件**：在目标元素上持续拖动时触发，通常用于阻止浏览器默认行为，允许拖放。 6. ...

    VMware6.0深度完美汉化版+vmtools+Drag&Drop_FixPatch（2）

    而且我已经把windows和linux的vmtools包，以及解决拖拽的问题脚本Drag&Drop_FixPatch一并加入进来，欢迎大家下载使用。 注意:因为大小问题,我分为两卷: VMware6.0深度完美汉化版+vmtools+Drag&Drop_FixPatch（1） ...

    Blender插件-多格式文件拖拽导入插件 Drag & Drop Import V1

    Optimize your workflow with Drag and Drop Import for Blender. Quickly and easily import files by dragging them from your file explorer and dropping them into Blender’s 3D Viewport or Outliner. No ...

    Drag &amp; Drop file uploader html5

    标题 "Drag &amp; Drop file uploader html5" 涉及到的是HTML5中的一个特性，即拖放（Drag and Drop）文件上传功能。在HTML5之前，网页上的文件上传通常依赖于传统的`&lt;input type="file"&gt;`标签，用户需要点击按钮...

    一个很不错的drag & drop

    标题中的“一个很不错的drag & drop”指的是使用拖放（Drag & Drop）技术的一个应用程序或功能，这在网页设计和开发中非常常见。拖放功能允许用户通过鼠标将元素从一处拖到另一处，实现数据的移动、拷贝或者进行其他...

    VMware拖放剪贴板支持组件

    【Drag&Drop_FixPatch.exe】很可能是这个补丁程序的执行文件，它的主要任务就是为VMware添加拖放支持。当用户安装并运行这个补丁后，应该能够在虚拟机和宿主机之间自由地拖放文件，无需再通过繁琐的复制粘贴或者借助...

    WPF Drag&Drop

    在Windows Presentation Foundation (WPF) 中，拖放（Drag&Drop）功能是一种常见的用户交互方式，允许用户通过鼠标操作将项目从一个位置移动到另一个位置。在这个特定的场景中，"WPF Drag&Drop"指的是在两个DataGrid...

    eclipse rcp drag&drop

    5. **Drag and Drop Operations**: 拖放操作有多种类型，如`DND.DROP_COPY`（复制）、`DND.DROP_MOVE`（移动）和`DND.DROP_DEFAULT`（默认）。在`DragSourceAdapter`和`DropTargetAdapter`中，你可以根据需要重写...

    Drag & drop source code android

    在Android开发中，拖放（Drag & Drop）功能是一种用户友好的交互方式，允许用户通过手势将一个元素从一处移动到另一处。本资源提供的"Drag & Drop source code android"包含了一个实现Android拖放功能的源代码示例，...

    Window下拖放操作Drag & Drop 全解析

    Window 下拖放操作 Drag & Drop 全解析 Windows 操作系统中拖放操作（Drag & Drop）是一种常用的用户交互方式，允许用户在不同的程序窗口之间、同一个程序的不同窗口之间或同一程序同一窗口的不同控件之间进行移动...

    Drag & Drop Modules

    在Web开发中，HTML5引入了`Drag and Drop` API，使得在浏览器中实现拖放操作变得更加简单和标准化。 在JavaScript虚拟机2（JSVM2）环境中，拖放功能的实现通常涉及到以下关键步骤： 1. **事件监听**：设置`...

    Drag&drop.zip

    在编程领域，尤其是图形用户界面（GUI）设计中，拖放（Drag & Drop）功能是一项常见且实用的技术。本篇将深入探讨如何在Qt 5.6环境中，利用minGW编译器实现跨列表框的拖放操作。首先，我们要理解Qt中的拖放机制是...

    Drag & Drop in Javascript.zip

    JavaScript中的拖放（Drag & Drop）功能是一种交互式技术，允许用户通过鼠标操作将元素从一个位置拖动到另一个位置，常用于文件管理、界面构建和游戏开发等场景。在这个"Drag & Drop in JavaScript"项目中，我们可能...

    Drag & Drop Files to Delete.zip

    标题“Drag & Drop Files to Delete.zip”提示我们这是一个与JavaScript相关的项目，可能涉及到文件操作，特别是拖放（Drag & Drop）功能，用于删除文件。在Web开发中，这种功能允许用户通过简单的拖放操作来处理...

Magicbox
Global site tag (gtag.js) - Google Analytics