jq 拖拽
1.尼玛, move事件的时候忘了加ev,找了一个多小时
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0; padding: 0}
#div1{width: 100px; height: 100px; background: red; position: absolute; left: 100px;
top: 100px;}
</style>
<script src="jquery-1.12.3.min.js"></script>
<script>
$(function(){
var disX = 0;
var disY = 0;
var $div1 = $("#div1");
$div1.on('mousedown',function(ev){
disX = ev.pageX - $(this).offset().left;
disY = ev.pageY - $(this).offset().top;
$(document).on('mousemove',function(ev){//此处忘了加ev, 找了一个多小时!
var left = ev.pageX - disX;
var top = ev.pageY - disY;
console.log(left+":"+top)
$div1.css('left',left);
$div1.css('top',top );
});
$(document).on('mouseup',function(){
console.log("off")
$(this).off();
});
return false;//按下的时候阻止默认事件
})
});
</script>
</head>
<body style="height: 2000px">
<div id="div1">divdiv</div>
</body>
</html>
jq 拖拽的更多相关文章
- 27、 jq 拖拽
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jq拖拽插件
(function ($) { var move = false; //标记控件是否处于被拖动状态 var dragOffsetX = 0; //控件左边界和鼠标X轴的差 var dragOffset ...
- Jquery拖拽，拖动排序插件
上github搜jquery-sortable <!-- jq拖拽排序 --> <script src="${contextPath}/static/excelTable/ ...
- jQ插件--时间线插件和拖拽API
这个时间轴是工作上用到的,自己写了一个, qq空间有时间轴的控件, 百度文库也有时间轴的控件: 百度的时间轴大概是这样的: 用户点击对应的锚链接, 那个三角会滚动, 然后左侧的界面也会滚动: 实际的 ...
- JQ实现3D拖拽效果
<!DOCTYPE HTML> <html onselectstart='return false'> <head> <meta http-equiv=&qu ...
- 基于 jq 实现拖拽上传 APK 文件，js解析 APK 信息
技术栈 jquery 文件上传:jquery.fileupload,github 文档 apk 文件解析:app-info-parser,github 文档 参考:前端解析ipa.apk安装包信息 - ...
- jq实现拖拽
$("body").delegate( ".msg-layer",{ mousedown: function (e) { var el = $(".m ...
- Jquery 多行拖拽图片排序 jq优化
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 不断优化，重构我的代码-----拖拽jquery插件
最近学东西学的有点太散了,歇一阵子,重新完善之前的JQ插件,今天先上拖拽吧 // JavaScript Document (function($){ var defaults = { actionEl ...
随机推荐
- 【C语言】10-字符和字符串常用处理函数
一.字符处理函数 下面介绍的两个字符处理函数都是在stdio.h头文件中声明的. 1.字符输出函数putchar putchar(65); // A putchar('A'); // A int a ...
- 关于SparkMLlib的基础数据结构 Spark-MLlib-Basics
此部分主要关于MLlib的基础数据结构 1.本地向量 MLlib的本地向量主要分为两种,DenseVector和SparseVector,顾名思义,前者是用来保存稠密向量,后者是用来保存稀疏向量,其创 ...
- app.config中的connectionstring
<connectionStrings> <add name="wz" connectionString="server=www.junjv.com ...
- Office and Windows KMS使用帮助
Office KMS Key: http://technet.microsoft.com/zh-cn/library/dn385360.aspx htt ...
- Unattend.xml应答文件制作（WISM）-- 转自爱做梦的鱼
将制作好的应答文件unattend.xml拷贝到模板机sysprep目录下,然后在cmd下运行(unattend.xml文件可自定义名称) sysprep /generalize /oobe /s ...
- Spring框架中的定时器 如何使用和配置
目标类 <bean id="myTimer" class="com.timer.MyTimer"></bean> 配置你的定时器详情 & ...
- OC中的属性、方法及内存管理
普通方法:关注(代表)对象可以”干什么”,过程中需要实例变量.-(void)show;输出 … 访问属性 属性:属性专门处理实例变量.(程序执行过程当中) 初始化方法:一创建对象(第一时间 ...
- metasploit-post模块信息
Name Disclosure Date Rank Description ---- ...
- Mac OS 快捷键
系统 (Option+) Command+Space 切换输入法 Command+Tab 切换不同应用 Command+Tab 切换一个应用内的不同窗口 Command+Shift+3 截取整个屏幕 ...
- DS实验题 击鼓传花
题目: 代码1(数组实现): // // main.cpp // DS-击鼓传花 // // Created by wasdns on 16/11/9. // Copyright © 2016年 wa ...