脚本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. 201521123038 《Java程序设计》 第十周学习总结

    201521123038 <Java程序设计> 第十周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题 ...

  2. 201521123040《Java程序设计》第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...

  3. Java课程设计——计算器

    1.团队课程设计博客链接 http://www.cnblogs.com/yuanj/p/7072137.html 2.个人负责模块或任务说明 确定课题并进行任务分工 编写计算器删除,清零,清空,小数点 ...

  4. 201521123092《java程序设计》第十周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出 ...

  5. Linux帮助手册（man）

    Linux的帮助文档 在我们使用Linux的过程中,都会遇到这样那样的问题,一般我们在计算机能连上网的情况下会进行百度或Google解决问题,但是并不是所有文题都能在网上很快得到答案.万一我们是在没有 ...

  6. 关于Java中数组的常用操作方法

    1. 声明一个数组 String[] arr1 = new String[5]; String[] arr2 = {"a","b","c", ...

  7. JavaScript基础回顾

    1, NaN 不是数字  Infinity 无穷大 alert(parseInt("dd")); //NaN alert(1/0); //Infinity 2, 逻辑或 || ,返 ...

  8. JavaEE学习路线

    针对很多初识Java者,对如何学习Java.如何学好Java很迷茫,最近刚把JavaEE的东西学完,把我的学习的经验分享给大家,一条适合大多数人的学习路线. 第一部分:Java语言入门阶段 第二部分: ...

  9. linux 命令随笔 ls cd pwd mkdir rm mv cp cat nl

    Linux 命令练习 ls命令 ls就是list的简写,目的是打印当前目录下的清单 格式 ls[选项][目录名] 常用参数 -a –all 列出目录下的所有文件,包括以 . 开头的隐含文件 -l 除了 ...

  10. XtraGrid滚轮翻页

    滚轮翻页与传动的翻页更为方便,经过本人一番探讨与琢磨终于在XtraGrid的GridView中实现了鼠标滚轮翻页. 我新建了一个组件继承原本的GridControl,在组件中添加了一个ImageLis ...