http://www.blueidea.com/tech/web/2006/3791_5.asp
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:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
// y:ev.clientY + document.body.scrollTop - document.body.clientTop
// };
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;
}
}
var targWidth = parseInt(curTarget.offsetWidth);
var targHeight = parseInt(curTarget.offsetHeight);
setAttribute('startWidth', parseInt(offsetWidth));
setAttribute('startHeight', parseInt(offsetHeight));
setAttribute('startLeft', pos.x);
setAttribute('startTop', pos.y);
(getAttribute('startTop')
<script language="javascript">
var currentObj=null;
var offleft;
var offtop;
function funMup()
{
currentObj=null;
}
function funMdown(obj)
{
currentObj=obj;
offleft=event.x-obj.style.pixelLeft;
offtop=event.y-obj.style.pixelTop;
}
document.onmouseup=funMup;
function funMove()
{
if(currentObj!=null)
{
//alert()
currentObj.style.top=event.y-offtop;
currentObj.style.left=event.x-offleft;
//currentObj.style.pixelTop=event.y-offtop;
//currentObj.style.pixelLeft=event.x-offleft;
}
}
document.onmousemove=funMove;
function dd()
{
if(currentObj!=null)
{
//alert()
currentObj.style.top=event.y-offtop;
currentObj.style.left=event.x-offleft;
//currentObj.style.pixelTop=event.y-offtop;
//currentObj.style.pixelLeft=event.x-offleft;
}
}
function funclick()
{
var bb=testfun();
alert(bb.x);
}
function testfun()
{
return{x:00,y:11};
}
function cl()
{
alert( document.body.clientTop);
alert(event.clientX);
alert(event.srcElement.id);
}
function ma()
{
alert(arguments.length);
}
</script>
- dragmove.rar (7.3 KB)
- 下载次数: 0
发表评论
-
转载:jquery webservice 跨域
2013-01-28 16:06 1295现在的JQuery中$.ajax方法支持跨域读取json数 ... -
变更地址栏参数
2011-09-14 10:06 826<html> <head ... -
仿google 日历
2011-08-24 23:10 908仿google 日历仿google 日历仿google 日历仿 ... -
Jquery fullcalendar 官方中文文档
2011-08-22 08:47 25211. 使用方式, 引入相关js, css后, $(‘#div_ ... -
js webservice
2011-05-12 08:50 11131. 创建webservice,为了免于落俗我稍稍修改了 ... -
光标位置函数
2010-12-16 12:44 818function getCursortPosi ... -
select元素javascript常用操作
2010-12-14 09:32 659东西很简单,只是自己记性不好,经常忘记一些关键字 所以发 ... -
cookie
2010-09-17 09:06 705function SetCookie(CookieNa ... -
webservice and js
2010-06-24 09:17 849jQuery调用WebService网上的介 ... -
js 类的实现 转载
2010-05-14 10:43 795JavaScript本身并不是设计成面向对象的,所以没 ... -
jsxiaoguo
2009-05-14 10:52 740jsxiaoguo -
窗体大小
2009-05-12 09:39 906网页可见区域宽:document.body.clientWid ... -
闭包小例
2009-02-05 08:53 756//A是一个普通的函数 ... -
js other event target
2008-11-20 14:41 1159解耦导航模式 function Onclick(evt) ... -
用 javascript 处理 JSON
2008-11-19 14:33 1311用 javascript 处理 JSON 关键字: json ... -
js 倒计时
2008-11-13 09:28 993<!doctype html public " ... -
Javascript中最常用的55个经典技巧
2008-09-27 17:47 8911. oncontextmenu="window.e ... -
js xml
2008-09-17 10:53 1224loadXML = function(xmlFile) ... -
正则表达式
2008-09-12 09:04 832数:44] //校验是否全由数字组成 function ... -
js 函数
2008-09-11 13:12 8231.document.write(""); ...
相关推荐
总的来说,"js-div-dragmove"是一个使用JavaScript实现的div元素拖放并按轨迹自动移动的功能,涉及到的技术点包括事件处理、坐标计算、CSS操作、定时器和动画原理,以及可能的轨迹存储和回放。这样的功能在网页交互...
dragmove.js 一个超小的Javascript库,使DOM元素可拖动和移动。 具有触摸屏支持。 零依赖性和500字节压缩。 。 用法 节点 npm install @knadh/dragmove import { dragmove } from @ knadh / dragmove ; // (target...
jQuery.dragmove 是 DOM 元素拖拽扩展插件。 支持的浏览器: – Google Chrome– Safari ( Desktop and Mobile )– Internet Explorer ( 9, 10, 11 )– Firefox 标签:jQuery
console.log( 'dragMove on ' event.type pointer.pageX ', ' pointer.pageY ' position at ' instance.position.x ', ' instance.position.y ); } // bind event listener draggie.on( 'dragMove', onDragMove...
3. **模拟WM_SYSCOMMAND消息**:通过`SendMessage(hWnd, WM_SYSCOMMAND, SC_DRAGMOVE, 0)`向窗口发送WM_SYSCOMMAND消息,其中`SC_DRAGMOVE`是一个特定的常量,用于指示窗口开始跟随鼠标移动。 4. **实现窗口移动**...
- `this.DragMove()` 是一个内置的方法,它允许我们在不依赖于默认标题栏的情况下移动窗口。 - `e.OriginalSource` 属性可以用来判断触发事件的对象。这里使用 `is Microsoft.Windows.Themes....
$("#imageId").on('mousedown', dragStart).on('mousemove', dragMove).on('mouseup', dragEnd); ``` 3. **拖动开始**(`dragStart`):当用户按下鼠标时,记录当前位置并设置拖动状态。 ```javascript ...
处理窗口拖动的方式也类似,但需要使用`DragMove`方法,这需要在`MouseLeftButtonDown`事件中调用: ```csharp private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { this.DragMove...
4. 事件驱动:draggabilly提供了丰富的拖放事件,如`dragStart`、`dragMove`和`dragEnd`,使开发者能够精确控制拖放过程中的每一阶段。 二、draggabilly的使用步骤 1. 引入库:首先,你需要在HTML文件中引入...
`DragMove()`方法是WPF提供的内置函数,它允许用户通过鼠标移动窗口。 为了实现类似手机浮动窗口的交互,我们可以添加键盘控制。这可以通过创建一个新的UserControl,如`KeyBoardControl.xaml`,并在其中定义按键...
Dragscroll 是一款极小的拖拽风格的 JavaScript 库(978 字节)。它可以按住鼠标按钮实现滚动。 标签:dragscroll
DragMove(); } } protected override void OnMouseMove(MouseMoveEventArgs e) { if (_startPoint != null && e.LeftButton == MouseButtonState.Pressed) { Vector diff = _startPoint.Value - e.GetPosition...
- 在确定了 `dragInitiator` 后,可以通过事件监听器(如 `dragStart`, `dragMove`, `dragEnd` 等)来实现具体的拖动行为。 - 例如,在 `dragStart` 事件中计算偏移量,以便于在拖动过程中更新图像的位置;在 `...
4. **事件监听**:库提供了各种事件,如`snapStart`、`snapEnd`和`dragMove`,开发者可以通过监听这些事件来实现自定义的交互逻辑。 5. **兼容性**:Snap.js设计时考虑了浏览器的兼容性,支持现代浏览器以及部分旧版...
例如,你可以监听`dragStart`、`dragMove`和`dragEnd`事件来处理拖动过程中的不同阶段。同时,通过设置`grid`选项,你可以使拖动元素在每次移动时都对齐到指定的像素网格。 此外,draggabilly与其他流行的库(如CSS...
用户可以通过触摸或鼠标进行操作,因此需要监听dragstart、dragmove和dragend事件。在CreateJS中,可以使用`DisplayObject.startDrag()`和`DisplayObject.stopDrag()`方法实现方块的拖放功能。 7. **性能优化**: ...
当用户开始拖动时,系统会发送WM_BEGIN_DRAG消息,拖动过程中会不断发送WM_DRAGMOVE消息,而当用户释放鼠标时,会发送WM_END_DRAG消息。 此源码可能包含以下关键知识点: 1. **窗口样式设置**:使用`窗口属性`或`...
draggabilly.on('dragMove', function(event, pointer, moveVector) { // 拖动过程中更新元素位置 }); draggabilly.on('dragEnd', function() { // 拖动结束时的操作,比如保存新的位置 }); } // 在DOM加载...