脚本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. delphi引用别的单元时问题

    当需要添加别的工程总的unit文件时,将unit的pas文档放入工程目录下,在工程页面Uses添加 Unit2 in 'Unit2.pas' {DataModule2: TDataModule}, U ...

  2. 笔记本win10安装node的尖酸历程。。。。。。

    在公司的电脑搭建vue环境分分钟搞定,周末闲的无聊给自己的电脑也搭建一个环境,谁知道这么多的问题,记录下这些问题,希望对那些安装node环境有问题的朋友一些帮助. 1.下载安装node 下载地址htt ...

  3. 在0~N个数字中，取指定个数的不重复数字，要求这些数字的和为指定值，求所有结果

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...

  4. iOS Storyboard约束详解

    链接:http://www.jianshu.com/p/b88c65ffc3eb 约束,就是指--此处略去1万字--都懂的,就不说了.直接进入实战环节. 本文的控件约束都是围绕着UITableView ...

  5. Hive任务优化（2）

    JOIN优化 1.大多数情况下,Hive会对每对Join连接对象启动一个MapReduce任务. 2.多表关联时,如果每个ON子句都使用相同的连接键的话,那么只会产生一个MapReduce Job. ...

  6. 计算机基础--Java中int char byte的关系

    计算机基础--Java中int char byte的关系 重要:一个汉字占用2byte,Java中用char(0-65535 Unicode16)型字符来存字(直接打印输出的话是字而非数字),当然要用 ...

  7. hdu 5937 -- Equation(搜索)

    题目链接 problem description Little Ruins is a studious boy, recently he learned addition operation! He ...

  8. Delphi10.2 VCL Forms Application 的构成

    Delphi10.2 项目的构成(File Extensions of Files Generated by RAD Studio) Step1.打开 Delphi10.2,选择[File | New ...

  9. Excel更改单元格格式后无效

    问题描述: 比如修改了数据的自定义显示格式(日期显示 yyyy"年"m"月",手机号分段000-0000-0000),应用后发现只有部分生效,或者都不生效,再检 ...

  10. easyUI表单基础知识

    easyUI创建异步提交表单 我们创建一个带有 name.email 和 phone 字段的表单.通过使用 easyui 表单(form)插件来改变表单(form)为 ajax 表单(form).表单 ...