`
wfdoublext
  • 浏览: 130369 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
社区版块
存档分类
最新评论

dragmove

阅读更多

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>

分享到:
评论

相关推荐

    js-div-dragmove

    总的来说,"js-div-dragmove"是一个使用JavaScript实现的div元素拖放并按轨迹自动移动的功能,涉及到的技术点包括事件处理、坐标计算、CSS操作、定时器和动画原理,以及可能的轨迹存储和回放。这样的功能在网页交互...

    dragmove.js:一个超小的Javascript库,使DOM元素可拖动和移动。 约500个字节,没有依赖关系

    dragmove.js 一个超小的Javascript库,使DOM元素可拖动和移动。 具有触摸屏支持。 零依赖性和500字节压缩。 。 用法 节点 npm install @knadh/dragmove import { dragmove } from @ knadh / dragmove ; // (target...

    jQuery扩展插件jQuery.dragmove.zip

    jQuery.dragmove 是 DOM 元素拖拽扩展插件。 支持的浏览器: – Google Chrome– Safari ( Desktop and Mobile )– Internet Explorer ( 9, 10, 11 )– Firefox 标签:jQuery

    jQuery拖放插件Draggabilly.zip

    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. **实现窗口移动**...

    wpf在没有标题栏的时候如何移动窗体

    - `this.DragMove()` 是一个内置的方法,它允许我们在不依赖于默认标题栏的情况下移动窗口。 - `e.OriginalSource` 属性可以用来判断触发事件的对象。这里使用 `is Microsoft.Windows.Themes....

    jQuery鼠标拖动图片放入购物车特效源码.zip

    $("#imageId").on('mousedown', dragStart).on('mousemove', dragMove).on('mouseup', dragEnd); ``` 3. **拖动开始**(`dragStart`):当用户按下鼠标时,记录当前位置并设置拖动状态。 ```javascript ...

    商业编程-源码-Csharp实例37 漂浮的窗口.zip

    处理窗口拖动的方式也类似,但需要使用`DragMove`方法,这需要在`MouseLeftButtonDown`事件中调用: ```csharp private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { this.DragMove...

    draggabilly一款功能强大的拖动拖拽元素插件

    4. 事件驱动:draggabilly提供了丰富的拖放事件,如`dragStart`、`dragMove`和`dragEnd`,使开发者能够精确控制拖放过程中的每一阶段。 二、draggabilly的使用步骤 1. 引入库:首先,你需要在HTML文件中引入...

    WPF可拖动浮动窗口(类似于手机浮动窗口工具)

    `DragMove()`方法是WPF提供的内置函数,它允许用户通过鼠标移动窗口。 为了实现类似手机浮动窗口的交互,我们可以添加键盘控制。这可以通过创建一个新的UserControl,如`KeyBoardControl.xaml`,并在其中定义按键...

    jQuery滚动插件dragscroll.zip

    Dragscroll 是一款极小的拖拽风格的 JavaScript 库(978 字节)。它可以按住鼠标按钮实现滚动。 标签:dragscroll

    WPF在窗口外部区域可拖动缩放

    DragMove(); } } protected override void OnMouseMove(MouseMoveEventArgs e) { if (_startPoint != null && e.LeftButton == MouseButtonState.Pressed) { Vector diff = _startPoint.Value - e.GetPosition...

    FLEX 容器内多个图片分别拖动

    - 在确定了 `dragInitiator` 后,可以通过事件监听器(如 `dragStart`, `dragMove`, `dragEnd` 等)来实现具体的拖动行为。 - 例如,在 `dragStart` 事件中计算偏移量,以便于在拖动过程中更新图像的位置;在 `...

    JavaScript_一个用Javascript创建漂亮的移动货架的库,Facebook和Path风格的侧菜单.zip

    4. **事件监听**:库提供了各种事件,如`snapStart`、`snapEnd`和`dragMove`,开发者可以通过监听这些事件来实现自定义的交互逻辑。 5. **兼容性**:Snap.js设计时考虑了浏览器的兼容性,支持现代浏览器以及部分旧版...

    jQuery拖动拖拽插件draggabilly.pkgd.js.zip

    例如,你可以监听`dragStart`、`dragMove`和`dragEnd`事件来处理拖动过程中的不同阶段。同时,通过设置`grid`选项,你可以使拖动元素在每次移动时都对齐到指定的像素网格。 此外,draggabilly与其他流行的库(如CSS...

    CreateJS实现【益智类数字华容道小游戏】

    用户可以通过触摸或鼠标进行操作,因此需要监听dragstart、dragmove和dragend事件。在CreateJS中,可以使用`DisplayObject.startDrag()`和`DisplayObject.stopDrag()`方法实现方块的拖放功能。 7. **性能优化**: ...

    易语言简化无边框拖放源码

    当用户开始拖动时,系统会发送WM_BEGIN_DRAG消息,拖动过程中会不断发送WM_DRAGMOVE消息,而当用户释放鼠标时,会发送WM_END_DRAG消息。 此源码可能包含以下关键知识点: 1. **窗口样式设置**:使用`窗口属性`或`...

    可以拖动的登录框 JS代码分享.zip

    draggabilly.on('dragMove', function(event, pointer, moveVector) { // 拖动过程中更新元素位置 }); draggabilly.on('dragEnd', function() { // 拖动结束时的操作,比如保存新的位置 }); } // 在DOM加载...

Global site tag (gtag.js) - Google Analytics