Jquery拖拽原理

/*
onmousedown : 选择元素
onmousemove : 移动元素
onmouseup : 释放元素
*/

查看Demo:拖拽图片

    function drag(obj) {

        obj.onmousedown = function(ev) {
            var ev = ev || event;

            var disX = ev.clientX - this.offsetLeft;
            var disY = ev.clientY - this.offsetTop;

            if ( obj.setCapture ) {
                obj.setCapture();
            }

            document.onmousemove = function(ev) {
                var ev = ev || event;

                obj.style.left = ev.clientX - disX + ‘px‘;
                obj.style.top = ev.clientY - disY + ‘px‘;
            }

            document.onmouseup = function() {
                document.onmousemove = document.onmouseup = null;
                //释放全局捕获 releaseCapture();
                if ( obj.releaseCapture ) {
                    obj.releaseCapture();
                }
            }

            return false;

        }

    }
时间: 2024-10-06 16:53:21

Jquery拖拽原理的相关文章

jQuery拖拽插件制作拖拽排序特效

基于jQuery拖拽插件制作拖拽排序特效是一款非常实用的鼠标拖拽布局插件.效果图如下: 在线预览   源码下载 实现的代码. html代码: <h1>水平拖拽</h1> <div class="demo"> <div class="item item1"><span>1</span></div> <div class="item item2"><

jquery -- 拖拽排序分析

今天应一个朋友的委托,研究一下拖拽排序,我记得我上次写拖拽排序,因为方法太死板,效果我一直不是很满意,一直想再从写一个,一直没机会(懒),这次因为公司部门变动所以有了一些时间(无聊)来写,本来准备使用Vue写,奈何功夫不到家在自定义指令的时候,问题卡住了,研究了一段时间之后,还是决定放弃,研究一下Vue再来写过,所以本次还是用了Jquery来写. 直接上代码 这是CSS部分 1 *{/*Css*/ 2 margin: 0px; 3 padding: 0px; 4 list-style: none

JQuery拖拽改变元素的尺寸

"元素拖拽改变大小"其实和"元素拖拽"一个原理,只是所动态改变的对象不同而已,主要在于 top.left.width.height 的运用,相对实现起来也非常容易.以下附出源码原型,弄明白了原理再扩展其他实际应用,思路就变得简单.清晰得多了.先来看看效果:塔河县臧清机械 下面是 JavaScript Code view source print? 01 <script type="text/javascript"> 02     /*

拖拽原理以及代码实现

拖拽功能主要是用在让用户做一些自定义的动作,比如拖动排序,弹出框拖动移动等等:挺好玩儿.下面分享一下拖拽的原理,和码友们一起学习! 拖拽流程: 1)事件:onmousedown:onmousemove:onmouseup: 2)实现原理分析: 拖拽是通过获取鼠标移动的距离来实现的,即计算移动前的位置的坐标(x,y)与移动中的位置的坐标(x,y)差值.当onmousedown或onmousemove时,都可以获取到当前鼠标的位置,即移动前的坐标值与移动中的坐标值.参考如下图: 如上图所示: 在on

JQUERY 拖拽 draggable droppable resizable selectable sortable

今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下: <script language="JavaScript" type="text/javascript" src="ui/jquery-1.8.2.js"></script> <script language="JavaScript" type="text/javascript" src="

jquery 拖拽变换位置

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>测试</title><style>.item_content ul { list-style: none; }.item_content ul li { width: 200px; height: 160px; float: left; margin: 10px }.item_content

js拖拽原理和碰撞原理

拖拽的原理onmousedown 选择元素onmousemove 移动元素onmouseup 释放元素 1:如果拖拽的时候有文字:被选中,会产生问题原因:当鼠标按下的时如果页面中有文字或者图片被选中的时候,则会发生文字默认可以被拖动,因此标准 :e.preventDefalut(); 阻止他的默认行为 非标准的阻止默认行为 非标准:window.event.returnValue=false; 2:给某元素设置全局捕获,当我们给一个元素设置全局捕获,那么这个元素会监听后续发生的所有事件,当有事件

jquery拖拽效果

<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 拖动(Draggable) + 排序(Sortable)</title> <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4

jQuery拖拽小插件

基本实现思路是利用了onmousedown,onmouseup,onmousemove三种事件和css中的绝对定位 插件功能: 1.设置拖拽热点 2.设置被拖拽对象 3.设置拖拽范围 默认情况下,拖拽热点和被拖拽对象是同一个元素,拖拽范围是文档窗口 jQuery代码 (function($){ $.fn.drag=function(opts){ var defaults={ dragObj:$(this), scope:{ left:0, top:0, right:$(document).wid