脚本div实现拖放功能

网页上有很多拖曳的操作，比如拖动树状列表，可拖曳的图片等。

1.原生拖放实现

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery UI Autocomplete - Default functionality</title>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

  <style>

  .drag{

    width: 200px;

    height: 200px;

    background-color: red;

    position: absolute;

    left:0;

    top:0;

  }

  </style>

  <script>

    $(function() {

      var _move = false;//判断目标对象书否处于移动状态

      var _x, _y;//鼠标离控件左上角的相对x.y坐标

      $('.drag').click(function(event) {

      }).mousedown(function(e) {//当按下鼠标左键时

    _move = true;//标记移动为true，开始移动

    _x = e.pageX - parseInt($('.drag').css('left'));//得到左上角的x的位置

    _y = e.pageY - parseInt($('.drag').css('top'));//得到左上角的y的位置

    $('.drag').fadeTo('20', 0.5);//单击后开始拖动

      });

      $(document).mousemove(function(e) {//监听鼠标移动

    if(_move) {

      var x = e.pageX - _x;//计算移动的距离

      var y = e.pageY - _y;

      $('.drag').css({top:y, left:x});

    }

      }).mouseup(function() {

    _move = false;

    $('.drag').fadeTo('fast', 1);

      });

    });

  </script>

</head>

<body>

  <div class="drag"></div>

</body>

</html>

2 jQuery UI draggable实现拖放

自行实现拖曳方法比较负责，jQuery UI提供了可拖曳的事件，允许用户非常简单的为一个div添加拖曳效果。

jQuery UI主要通过draggable事件来实现拖曳功能。

  <script>

    $(document).ready(function(e) {

      $('.drag').draggable({cursor: 'move'});

      $('#enable').click(function(e) {

    $('.drag').draggable('enable');

      });

      $('#disable').click(function(event) {

    $('.drag').draggable('disable');

      });

      $('#deatroy').click(function(event) {

    $('.drag').draggable('destroy');

      });

    })

  </script>

</head>

<body>

  <button id="enable">enable</button>

  <button id="disable">disable</button>

  <button id="destroy">destroy</button>

  <div class="drag">

	<p>请拖动我！</p>

  </div>

</body>

关于draggable的API可以参考draggalbe API

draggable 实例

脚本div实现拖放功能的更多相关文章

  1. 今天想用jquery来实现div的拖放功能

    html5标签.拖放(Drag 和 drop)是 HTML5 标准的组成部分. 步骤一:首先设置标签可以被拖 draggable="true" 步骤二:选取被拖的标签,和要放置被拖 ...

  2. 小强的HTML5移动开发之路（16）——神奇的拖放功能

    来自:http://blog.csdn.net/dawanganban/article/details/18181273 在智能手机发展飞速的现在拖放功能已经成为一种时尚,但是在我们的浏览器上是不是还 ...

  3. JavaScript如何实现拖放功能

    1.在学习ExtJs时,对其拖放功能感到很陌生,然后找了个拖放功能实现. 转载地址 2.拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素.鼠标的移动也就是x.y坐标的变化:元素的移动就是style. ...

  4. Draggabilly – 轻松实现拖放功能（Drag & Drop）

    Draggabilly 是一个很小的 JavaScript 库,专注于拖放功能.只需要简单的设置参数就可以在你的网站用添加拖放功能.兼容 IE8+ 浏览器,支持多点触摸.可以灵活绑定事件,支持 Req ...

  5. WPF拖放功能实现zz

    写在前面:本文为即兴而作,因此难免有疏漏和词不达意的地方.在这里,非常期望您提供评论,分享您的想法和建议. 这是一篇介绍如何在WPF中实现拖放功能的短文. 首先要读者清楚的一件事情是:拖放主要分为拖放 ...

  6. 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能

    原文:利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能1.在界面上添加几个checkbox和一 ...

  7. 如何使用LightningChart拖放功能进行数据转移 ?

    本文主要介绍如何使用LightningChart扩展拖放功能为所有图表组件创建图表,如:系列,标题,轴线等等.支持用鼠标放置自定义对象到另一个图表中,如:可以添加或修改JSON/CSV或其他格式的数据 ...

  8. HOW TO： 在 Visual C# .NET 应用程序中提供文件拖放功能

    本文假定您熟悉下列主题: Windows 窗体列表框控件 Windows 窗体事件处理 生成示例的步骤 列表框控件提供了您需要处理的两个拖放事件: DragEnter 和 DragDrop. 当您在控 ...

  9. WPF拖放功能实现

    写在前面:本文为即兴而作,因此难免有疏漏和词不达意的地方.在这里,非常期望您提供评论,分享您的想法和建议. 这是一篇介绍如何在WPF中实现拖放功能的短文. 首先要读者清楚的一件事情是:拖放主要分为拖放 ...

随机推荐

  1. eclipse ： java项目中的web.xml（ Deployment Descriptor 部署描述文件 ）配置说明

    context-param.listener.filter.servlet  首先可以肯定的是,加载顺序与它们在 web.xml 配置文件中的先后顺序无关.即不会因为 filter 写在 listen ...

  2. idea下使用autowire注解注入对象，结果初始化不到类

    如果idea下使用autowire注解注入对象,结果初始化不到类,明明使用快捷键alt+insert是可以找到该注入的对象的. 而我们在使用的时候,缺报错了??? 注意,当我们在注入对象的时候,我们留 ...

  3. global，local，static的区别

    1.在函数内部使用global关键字定义的变量可以成为全局变量,如果该变量已经被定义了,那么他的值就是原来的值,否则就是一个新的全局变量(一句话:已存在就不再创建): <?php $a=1; f ...

  4. Python初识2

    27.Python中没有{}括起来的代码块,使用pass来代替c语言中的{(无内容)}: 28.使用__name__来指示模块是如何加载的,如果是被导入的,那么__name__就是该模块的名字,如果是 ...

  5. AngularJS–Scope(作用域)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Scope Scope 是一个应用程序的模块的对象.它是表达式的执行上下文.它充斥在DO ...

  6. 【Java】关于Java8 parallelStream并发安全的思考

    背景 Java8的stream接口极大地减少了for循环写法的复杂性,stream提供了map/reduce/collect等一系列聚合接口,还支持并发操作:parallelStream. 在爬虫开发 ...

  7. 自定义流程gooflow2.0+自定义表单

    一.功能简介 gooflow功能清单1.自定义流程绘制2.自定义属性添加3.支持3种步骤类型普通审批步骤自动决策步骤手动决策步骤 4.决策方式(支持js决策,sql语句决策) 5.审批人员参与方式,可 ...

  8. oracle数据库备份、还原 （如何将Oracle 11g备份的dat文件导入到10g数据库里面）

    如何将Oracle 11g备份的dat文件导入到10g数据库里面 解决方法:      导出的时候后面加上目标数据库的版本号   导出: 在SQL plus下执行:create or replace  ...

  9. 初学node.js有感三

    WebStorm下的node.js 一.回顾与继续       在前面,我们知道了node.js的基本框架和思路,在这些原生环境下我们对node.js的设计思想有了比较深刻的认识,并且具有了编写大型程 ...

  10. MySQL show status 参数详解

    状态名 作用域 详细解释 Aborted_clients Global 由于客户端没有正确关闭连接导致客户端终止而中断的连接数 Aborted_connects Global 试图连接到MySQL服务 ...