脚本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. springmvc04-文件上传-JSON数据

    文件上传部分: 1, 导入commons-fileupload-1.2.2.jar commons-io-2.4.jar 两个jar包. 2, 在主配置文件中,添加如下信息 <!-- 文件上传- ...

  2. 西邮linux兴趣小组2014纳新免试题（五）

    [第五关] 题目 http://final5.sinaapp.com/ 关注西邮Linux微信平台,得到一个名为a的文件 分析 分析文件a 需要反汇编,拿IDA上,打开后发现key_function及 ...

  3. SoapUI简介和入门实例解析

    SoapUI简介 SoapUI是一个开源测试工具,通过soap/http来检查.调用.实现Web Service的功能/负载/符合性测试.该工具既可作为一个单独的测试软件使用,也可利用插件集成到Ecl ...

  4. Linux 内核模块程序结构

    1.内核加载函数 即我们常说的内核入口函数,当内核被加载的时候调用,在内核入口函数中多进行设备的注册和初始化,其中最常用的莫过于module_init().insmod xxx.ko的时候调用. 通常 ...

  5. hibernate学习手记(1)

    1. java.sql.SQLException: The server time zone value '?й???????' is unrecognized or represents more ...

  6. java中堆栈的功能作用 以及區別（搜集）

    1.用new创建的对象在堆区,函数中的临时变量在栈区,Java中的字符串在字符串常量区. 2.栈:存放进本数据类型的数据和对象的引用,但对象本身不存在栈中,而是存放在堆中.     堆:存放new产生 ...

  7. 怎样使用自定义标签简化 js、css 引入？

    国庆将至,工作兴致全无,来总结点项目里平时不起眼干货. 前端引入 js .css 一般是这样: <script type="text/javascript" src=&quo ...

  8. shim 和 polyfill

    在前端,有两个词经常被提及:shim 和 polyfill.最近在翻译文章时又遇到了 polyfill 这个词,准备把这两个概念理清楚. 关于 JavaScript 的兼容性问题,通常有不同的解决方案 ...

  9. GCD hdu1695容斥原理

    GCD Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  10. Just Finish it up UVA - 11093

    Just Finish it up Time Limit: 3000MS   Memory Limit: Unknown   64bit IO Format: %lld & %llu [Sub ...