js:简单的拖动效果

效果演示:https://jsfiddle.net/dwqs/b5ywws9f/embedded/result/

html:

<div class="wrap">
    <div id="boxmove" style="left:150px;top:150px;"> movebox </div>
 </div>

css

#boxmove{
        position: absolute;
        width: 200px;
        border:1px solid #ccc;
        height: 200px;
        color: red;
        background-color: blue;
        text-align: center;
        font-size: 30px;
    }

js

var o,   //捕获到的事件
      X,  //boxmove水平宽度
      Y;  //boxmove垂直高度
function getObject(obj,e){    //获取捕获到的对象
    o = obj;
    // document.all(IE)使用setCapture方法绑定;其余比方FF使用
//Window对象针对事件的捕捉
    document.all?o.setCapture() : window.captureEvents(Event.MOUSEMOVE);
    X = e.clientX - parseInt(o.style.left);   //获取宽度,
    Y = e.clientY - parseInt(o.style.top);   //获取高度,
}
document.getElementById("boxmove").onmousedown = function(e){
    
//boxmove捕获事件并处理  e-->FF  window.event-->IE
getObject(this,e||event);
};
document.onmousemove = function(dis){    //鼠标移动事件处理
    if(!o){
        return;
    }
    if(!dis){  //事件
        dis = event ;
    }
//设定boxmovebox样式随鼠标移动而改变

o.style.left = dis.clientX - X +"px";  

o.style.top = dis.clientY - Y + "px";};
document.onmouseup = function(){    
//鼠标松开事件处理    
if(!o){ return; }    

// document.all(IE)使用releaseCapture解除绑定。
//其余比方FF使用window对象针对事件的捕捉
    document.all?o.releaseCapture() : window.captureEvents(
Event.MOUSEMOVE|Event.MOUSEUP)
    o = ‘‘;   //还空对象
};

须要注意的是,由于须要更改div的left和top。

这两个属性须要以内联方式给出,否则不行。

原文:http://www.ido321.com/1489.html

參考文档:

https://developer.mozilla.org/en-US/docs/Web/API/Window/captureEvents

https://developer.mozilla.org/zh-CN/docs/Web/API/element/setCapture

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/releaseCapture

时间: 2024-10-10 16:48:10

js:简单的拖动效果的相关文章

使用jquery实现简单的拖动效果,分享源码

因为想实现相框的拖到,找了半天的原因愣是没有找到错误,所以,只能翻看源码了 如何实现拖动效果? 浏览DEMO 首先分析下拖动效果原理: 1.当鼠标在被拖动对象上按下鼠标(触发onmousedown事件,且鼠标在对象上方) 2.开始移动鼠标(触发onmousemove事件) 3.移动时更显对象的top和left值 4.鼠标放开停止拖动(触发onmouseup事件) 注意:拖动的对象必须是定位对象(即设置了position:absolute或 relative). 也就是说拖动事件=onmoused

CSS3及JS简单实现选项卡效果(适配手机端和pc端)

想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100%; overflow: hidden; } #bottom_box{ width: 100%; height: 50px; background-color: #eee; display: flex; //这是flex布局,父元素设置为flex,子元素设置几等份就是分成几等份 position:

实现简单的拖动效果

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title></title>     <style type="text/css">         #div1, #div2         {float:left; width:100px; height:35px; margin:10px;padding:

JS简单拖拽效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拖拽</title> <style> *{margin:0;padding:0;} #box{width:100px;height:100px;background-color: #f00;position:absolute;left:0;top:0

简单的鼠标拖动效果

使用js实现简单的鼠标拖动效果,但此部分代码有个小小的BUG,后期改进好我会写进来,但基本的效果已经实现,请大家参考. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标移动</title> <style> #box{ width: 50px; height: 50px; position:

js实现的div拖动效果实例代码

js实现的div拖动效果实例代码:div的拖动效果在很多效果中都有应用,当然还有很多附加的功能,本章节只是给拖动效果,并介绍一下它的实现过程.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <t

js 实现win7任务栏拖动效果

前言 在某个时刻, 我认识了一个朋友. 此人在我的教唆下, 踏上了js的不归路. 前天他问我, Win7任务栏拖动效果怎么实现. 我随口就跟他说, 这简单的一逼. 在我一晚上的折腾之后, 一份潦草的代码总算实现了功能. PS: 我是搞C++的, js略懂一二.. 源码 话不多说, 上源码. 1 // 常量 2 var CELL_WIDTH = 100; 3 var CELL_HEIGHT = 50; 4 5 var Utils = { 6 pixelToInt: function(str) 7

js简单 图片版时钟,带翻转效果

js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>时钟</title> <style type="text/css"> ul,li{ list-style: none; margin: 0; padding: 0; } ul{ position: absolute; left: 2

Web的鼠标拖动效果

以前写过一个拖动效果的Demo,拖拽元素新位置的计算是放在拖拽元素的mousemove事件中进行的.计算效率差,而且效果不好.所以一直有想怎样才能做出jquery-ui那种顺滑的拖拽效果. 其实顺滑的拖拽效果的突破口有两点: 事件捕捉要去捕捉document的鼠标位置. 使用setInterval功能计算拖拽元素的新位置. 使用jQuery,经过一些简单的重构和调试,将代码完善如下: drag.html <!DOCTYPE html> <html> <head> <