脚本div实现拖放功能
脚本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
脚本div实现拖放功能的更多相关文章
- 今天想用jquery来实现div的拖放功能
html5标签.拖放(Drag 和 drop)是 HTML5 标准的组成部分. 步骤一:首先设置标签可以被拖 draggable="true" 步骤二:选取被拖的标签,和要放置被拖 ...
- 小强的HTML5移动开发之路(16)——神奇的拖放功能
来自:http://blog.csdn.net/dawanganban/article/details/18181273 在智能手机发展飞速的现在拖放功能已经成为一种时尚,但是在我们的浏览器上是不是还 ...
- JavaScript如何实现拖放功能
1.在学习ExtJs时,对其拖放功能感到很陌生,然后找了个拖放功能实现. 转载地址 2.拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素.鼠标的移动也就是x.y坐标的变化:元素的移动就是style. ...
- Draggabilly – 轻松实现拖放功能(Drag & Drop)
Draggabilly 是一个很小的 JavaScript 库,专注于拖放功能.只需要简单的设置参数就可以在你的网站用添加拖放功能.兼容 IE8+ 浏览器,支持多点触摸.可以灵活绑定事件,支持 Req ...
- WPF拖放功能实现zz
写在前面:本文为即兴而作,因此难免有疏漏和词不达意的地方.在这里,非常期望您提供评论,分享您的想法和建议. 这是一篇介绍如何在WPF中实现拖放功能的短文. 首先要读者清楚的一件事情是:拖放主要分为拖放 ...
- 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能
原文:利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能1.在界面上添加几个checkbox和一 ...
- 如何使用LightningChart拖放功能进行数据转移 ?
本文主要介绍如何使用LightningChart扩展拖放功能为所有图表组件创建图表,如:系列,标题,轴线等等.支持用鼠标放置自定义对象到另一个图表中,如:可以添加或修改JSON/CSV或其他格式的数据 ...
- HOW TO: 在 Visual C# .NET 应用程序中提供文件拖放功能
本文假定您熟悉下列主题: Windows 窗体列表框控件 Windows 窗体事件处理 生成示例的步骤 列表框控件提供了您需要处理的两个拖放事件: DragEnter 和 DragDrop. 当您在控 ...
- WPF拖放功能实现
写在前面:本文为即兴而作,因此难免有疏漏和词不达意的地方.在这里,非常期望您提供评论,分享您的想法和建议. 这是一篇介绍如何在WPF中实现拖放功能的短文. 首先要读者清楚的一件事情是:拖放主要分为拖放 ...
随机推荐
- 201521123114 《Java程序设计》第12周学习总结
1.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,double ...
- 201521123121 《Java程序设计》第12周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. Java流(Stream).文件(File)和IO Java.io包几乎包含了所有操作输入.输出需要的类.所有 ...
- Sql Server——基础
前言: 在了解数据库之前,我们应该首先了解一下和数据库有关的知识,如:什么是数据,什么又是数据库等. 数据:描述事物的符号记录称为数据,它是数据库中存储的基本对象. 数据库(Datebase):数 ...
- jQuery常用语法总结笔记
jQuery 1.入口函数 1 $(document).ready(function(){}); 2 $(function(){}); jQuery入口函数与js入 ...
- mount挂载和交换分区swap
目录 mount挂载 挂载方法 选项 查看设备 卸载命令 文件挂载配置文件fstab 交换文件与分区 swap优先级 三个工具free,df,du 扩展 移动介质 使用光盘 挂载USB设备 mount ...
- Https系列之一:https的简单介绍及SSL证书的生成
Https系列会在下面几篇文章中分别作介绍: 一:https的简单介绍及SSL证书的生成二:https的SSL证书在服务器端的部署,基于tomcat,spring boot三:让服务器同时支持http ...
- 两句话动态修改table数据并提交到后台
//为所有的input 添加click事件,我将对象的id放入到name属性中,行数放入到alt属性中 $("input").click(function(obj){ //获得当前 ...
- 小米2017秋招真题——电话号码分身问题(Java版)
原题描述如下: 通过对各个数字对应的英文单词的分析,可以发现一些规律: 字母Z为0独占,字母W为2独占,字母U为4独占,字母X为6独占,字母G为8独占: 在过滤一遍0.2.4.6.8后,字母O为1独占 ...
- 关于xamarin.forms 中 list 的loadmore
前言 最近几天在研究上拉加载啊,下拉刷新啊什么的.然而坑爹的事情总是那么多.在xamarin.forms中,list自带的,并没有上拉加载的这个属性(难道当初他们封装方法时,就不会想到数据多了会咋整吗 ...
- 干货,比较全面的c#.net公共帮助类
比较全面的c#帮助类 比较全面的c#帮助类,日常工作收集,包括前面几家公司用到的,各式各样的几乎都能找到,所有功能性代码都是独立的类,类与类之间没有联系,可以单独引用至项目,分享出来,方便大家,几乎都 ...