(function ($) {
$.dragDrop=function (p) {
var cols=$(p.accepter),//accepter集
ground=[],//坐标空间
t,//被拖动元素
m={
},//被拖动元素属性集
tip=$("<div style='position:absolute;height:4px;overflow:hidden; background:#F30'></div>"),//占位元素
clone,
fly,//拖动启动开关
base,//被选中的垒
ball, //用于定位的accepter中对象
mark,//最后一次插入的相对对象
above=true,
befordrag=function (v) {
v.stopPropagation();
v.preventDefault();
m={
ex:v.clientX,ey:v.clientY+$(document).scrollTop(),x:t.position().left,y:t.position().top,w:t.outerWidth(true),h:t.outerHeight(true)
};
$(document).mousemove(ondrag).mouseup(afterdrag);
if(document.body.setCapture) {
t.get(0).setCapture();
t.get(0).onmousewheel=mousewheel
}
},
ondrag=function (v) {
v.preventDefault();
if(!fly) {
fly=true;
//将可移动元素的坐标存储到ground集合中。
makeGround();
tip.insertBefore(t);
mark=t.get(0);
//拖动元素的副文本样式
clone=t.clone().css({
"position":"absolute","opacity":0.5,"left":m.x,"top":m.y,"width":m.w,"z-index":125058687
}).insertAfter(t);
};
selectBase(v.clientX+$(document).scrollLeft(),v.clientY+$(document).scrollTop());
clone.css({
"left":v.clientX-m.ex+m.x,"top":v.clientY-m.ey+m.y+$(document).scrollTop()
});
//if($(base[3]).children().index(ball[3])==-1)
{//修正除IE8、firefox、chrome下的光标与拖动中的对象的显示异常
tip.insertBefore(ball[3]);
clone.insertAfter(ball[3]);
}
if(p.ondrag || typeof p.ondrag=="function")
{
p.ondrag(v,t,base[3],ball[3]);
}
},
//初始绑定事件
cols.find(p.target).each(function (i,o) {
(p.handle?$(o).find(p.handle):$(o)).mousedown(function (v) {
t=$(o);
befordrag(v)
})
});
分享到:
相关推荐
1. **设置拖放属性**:为需要拖动的元素添加`draggable="true"`属性。 2. **绑定事件**:在元素上绑定`ondragstart`、`ondrag`和`ondragend`事件处理函数。 3. **数据传输**:在`ondragstart`事件中,使用`event....
1. **Vue组件化**:Vue Power Drag 基于Vue组件构建,这意味着你可以轻松地将拖拽功能嵌入到你的Vue项目中,只需在模板中引入组件并配置必要的属性。 2. **事件监听器**:Vue Power Drag 使用事件监听器来捕捉拖放...
1. **事件绑定**:`jquery.event.drag`通过绑定`mousedown`、`mousemove`、`mouseup`等鼠标事件来实现拖动行为。当用户按下鼠标并移动时,元素会跟随鼠标移动,松开鼠标时停止。 2. **距离阈值**:插件允许设置启动...
dgv drag dgv drag dgv drag
1. 初始化:在启动拖放操作前,需要确保组件已经正确初始化,通常是在OnMouseDown事件中启动拖动。 2. 数据格式:定义拖放的数据格式,如CF_HDROP用于文件列表,或者自定义的格式用于特定的数据类型。 3. 拖放范围...
在Android开发中,拖放(Drag and Drop)功能是一种常见的用户交互方式,允许用户通过手势将一个对象从一处移动到另一处。这个功能在许多场景下都非常实用,比如整理应用抽屉、移动文件或者在布局中调整控件位置等。...
1. 引入库:在HTML文件中通过`<script>`标签引入`drag.js`文件。 2. 初始化元素:通过JavaScript调用`drag.js`提供的初始化函数,将特定元素设为可拖动。 ```javascript var myDraggable = new Drag(document....
1. **开始拖动**:当用户按下鼠标左键并开始移动时,通常会触发`MouseLeftButtonDown`事件。在这个事件处理程序中,我们需要设置`e.Handled = true`来阻止默认的点击行为,并启动拖放操作。同时,我们可以创建一个`...
bootstrap-table拖拽需要dragtable.css,jquery.dragtable.js,jquery-ui.js,bootstrap-table-reorder-columns.js
在网页开发中,交互性和用户体验是至关重要的因素之一,而拖放(Drag and Drop)功能则是提升用户交互体验的一种常见技术。"drag拖动插件"正是为了实现这一功能而设计的,它能够使得HTML元素,如div,具有拖动和调整...
1. `new Drag(element, options)`:创建一个新的Drag实例,`element`参数是要设置拖拽功能的DOM元素,`options`是一个对象,包含各种配置项,如限制拖动范围、设定拖动时的样式等。 2. `options.handle`:设置拖动...
拖拽drag.js
1. **安装库**:首先,使用npm或yarn安装对应的拖放库,例如: ``` npm install ng2-dragula --save ``` 2. **导入模块**:在应用的主模块中导入所需的拖放模块,例如: ```typescript import { DragulaModule...
在Android开发中,拖放(DragAndDrop)功能是一个常用且有趣的交互方式,它允许用户通过手势将一个视图移动到另一个位置,或者在不同的视图之间传递数据。本示例将详细介绍如何实现一个简单的拖放操作,并解决你在...
**1. jQuery UI Drag插件介绍** jQuery UI是基于jQuery库的一个扩展,它提供了丰富的UI组件,如对话框、日期选择器、滑块等,而Drag插件则是其基础交互组件之一。通过Drag插件,我们可以轻松地赋予HTML元素拖放功能...
1. **拖放(Drag and Drop)技术**:拖放是用户界面中的一项基本功能,允许用户通过鼠标或触摸设备选择一个元素并将其移动到另一个位置。在HTML5中,内置了拖放API,使得在网页上实现拖放操作变得相对简单。开发者可以...
"Java中的Drag and Drop拖拽技术" Java中的Drag and Drop拖拽技术是指在Java应用程序中,实现拖拽操作的技术。Drag and Drop技术可以将数据从一个组件拖拽到另一个组件中,实现数据的传输和交互操作。 Drag and ...
《jQuery拖拽插件drag.js深度解析》 在网页开发中,实现元素的拖放功能是一种常见的交互设计,它能够提升用户体验,使用户能够通过直观的拖拽操作与页面进行互动。jQuery作为一款广泛使用的JavaScript库,提供了...
【深度VMware6.0完美精简汉化版+Drag&Drop_FixPatch】是一款针对VMware Workstation 6.0的专业优化版本,它结合了深度定制和汉化,为用户提供更加符合中文用户习惯的操作界面。VMware Workstation是一款强大的虚拟机...
VMware6.0深度完美汉化版+vmtools+Drag&Drop_FixPatch(1) VMware6.0深度完美汉化版+vmtools+Drag&Drop_FixPatch(2) 两卷下完才能解压. PS:本人看了评论很无语,这种事情还要我特地写个Notice出来.真的是程序员么...