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

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

  2. 详解go语言的array和slice 【一】

    本篇会详细讲解go语言中的array和slice,和平时开发中使用他样时需要注意的地方,以免入坑. Go语言中array是一组定长的同类型数据集合,并且是连续分配内存空间的. 声明一个数组 var a ...

  3. 注解【介绍、基本Annotation、元Anntation、自定义注解、注入基本信息、对象】

    什么是注解? 注解:Annotation-. 注解其实就是代码中的特殊标记,这些标记可以在编译.类加载.运行时被读取,并执行相对应的处理. 为什么我们需要用到注解? 传统的方式,我们是通过配置文件(x ...

  4. JS表单对象和图片对象--JavaScript基础

    1.表单对象 1)访问者输入正确的密码才可进入网站 HTML DOM prompt() 方法,prompt() 方法用于显示可提示用户进行输入的对话框.prompt(text,defaultText) ...

  5. stl 和并查集应用

    抱歉这么久才写出一篇文章,最近进度有点慢.这么慢是有原因的,我在想如何改进能让大家看系列文章的时候更方便一些,现在这个问题有了答案,在以后的推送中,我将尽量把例题和相关知识点在同一天推出,其次在代码分 ...

  6. StringBuffer的添加与删除功能

    StringBuffer的添加功能A* public StringBuffer append(String str): * 可以把任意类型数据添加到字符串缓冲区里面,并返回字符串缓冲区本身 B* pu ...

  7. jquery对象和js对象

    <ul id="ul1">   <li id="li_1">01</li>   <li>02</li> ...

  8. PyTorch教程之Neural Networks

    我们可以通过torch.nn package构建神经网络. 现在我们已经了解了autograd,nn基于autograd来定义模型并对他们有所区分. 一个 nn.Module模块由如下部分构成:若干层 ...

  9. JavaScript高级（01）

    前端开发工具 1.1. WebStorm介绍和下载 l  介绍 WebStorm是JetBrains 推出的一款强大的HTML5编辑工具,拥有丰富的代码快速编辑,可以智能的补全代码.代码格式化.htm ...

  10. 记录一下从懵懂到理解RESTful的过程

    前言 Spring+SpringMVC+MyBatis+easyUI整合进阶篇(一)设计一套好的RESTful API Spring+SpringMVC+MyBatis+easyUI整合进阶篇(二)R ...