简单的JQuery完美拖拽】的更多相关文章

首先导入jq库,最好是1.0版本的.调用函数时,传入要拖拽元素的id值. function drag(sel){ $div = $("#"+sel); $div.mousedown(function(evt){ var disX = evt.pageX-$(this).offset().left; var disY = evt.pageY=$(this).offset().top; $(document).mousemove(function(evt){ var left = evt.…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…
这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovertree.com/texiao/jquery/92/ 进去后可以上下左右的拖动图片. 本示例中使用到了CSS3的transform-style 属性,该规定如何在 3D 空间中呈现被嵌套的元素. 默认值: flat继承性: no版本: CSS3JavaScript 语法: object.style.t…
jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动,拖动后回调,点击可以折叠树型结点,可以用来在后台模仿wordpress后台拖动菜单,实现多级菜单. GitHub地址: https://github.com/camohub/jquery-sortable-lists js代码: var options = { placeholderCss: {'background-color': '#ff8'}, hintCss: {'backgroun…
很久之前写了一个jquery3D楼盘在线选择,这么一个插件,插件很简单,因为后期项目中没有实际用到,因此,有些地方不是很完善,后面也懒得再进行修改维护了.最近放到github上面,但是也少有人问津及star.昨天,有个网友问我,这个插件中关于拖拽的一些写法!因此,今天在这里简单的对这个插件及相关知识做一些解释,希望对广大朋友有帮助! 引子——关于jquery的某些写法 我先不对监听事件做解释,我们先来看下jquery的一些写法吧!我们最常用的是jquery的css()方法,相信大家都会用! 假如…
drag1 drag2 drag3 代码如下: <!DOCTYPE HTML> <html> <head> <title>div拖拽到div</title> <script src="jquery.js"></script> <style type="text/css"> #div1, #div2, #div3 { float: left; width: 150px; h…
所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象   ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象   ui.position - 表示相对当前对象,鼠标的坐标值对象{top,left}   ui.offset - 表示相对于当前页面,鼠标的坐标值对象{top,left}   ui.item - 表示当前拖拽的元素   ui.placeholder - 占位符(如果有定义的话)   ui.sender…
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试的拖拽功能</title> <style type="text/css"> body, div { margin: 0; paading: 0; f…
最近做了个简易的基于boostrap的文件上传功能,jsp版本的,后续会完善更多的功能,不过现在已经能用了,需要的小伙伴,直接引用下面的文件内容直接copy到自己的项目中就ok了,效果如图: fileupload.css: .fileupload_box { position:relative; width: 100%; height: 100%; border: 3px dashed #E5E5E5; text-align: center; z-index: 2000; cursor: poi…
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1{ position: absolute; background: blue; } </style> <script src="http://libs.baidu…