jquery 实现简单拖拽

$.fn.drag = function(obj) { var dragging = false; var oDrag = $(obj); oDrag.mousedown(function(e) { dragging = true; var disX = e.pageX - oDrag.offset().left; var disY = e.pageY - oDrag.offset().top; oDrag.css('position','absolute'); $(document).mous…

移动端多个DIV简单拖拽功能

移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>移动端多个DIV拖拽</title> <style> * { padding: 0; margin: 0; } .container { hei…

jquery实现可拖拽的div

由于项目中并未引入前端开发框架easyui.ext.没有现成的控件可以使用,今天时间算是充裕的时候,自己写了一个可以拖拽.放大缩小的例子.欢迎大家指正. 不啰嗦,上代码: 依赖的文件:jquery.js 需要大家下载一个,或者找个在线的jquery 比如:http://libs.baidu.com/jquery/1.11.1/jquery.min.js 拖动思路:拖动思路很简单就是监听鼠标的mousedown和mouseup事件, 放大缩小思路: 改变div的大小,我画了个图来看下把: 依据上诉…

jquery 实现页面拖拽并保存到cookie

实现的效果就是页面内的图片可拖拽到任意位置,并将所在位置保存.下次打开页面依然可见.本文是作demo用,实际开发中,位置的数据应保存到数据库中. 好了,开始. 1.准备工作. a.jquery(1.7.2),ui,cookie插件,json插件.一些图片(本文是5张). 2.页面. 上代码 1 2 3 4 5 6 7 <div class="img_list" id="img_list"> <div id="baidu">…

JQuery UI的拖拽功能

JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量的第三方插件可以丰富JQuery UI的功能. JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理首先要明确几个概念. ource:拖拽源,要拖动的元素. taerge…

JQuery UI的拖拽功能实现方法小结

JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理首先要明确几个概念. ource:拖拽源,要拖动的元素. taerget:拖放目标,能够放入source的容器. 拖拽的动作分解如下: 1. drag start:在拖拽源(source)上按下鼠标并开始移动 2. drag move: 移动过程中 3. drag enter: 移动进入目标(target)容器 4.…

jquery插件-自由拖拽

最近工作不是很忙,学习之余想整理一些代码出来,首先想到的就是是js拖拽. 两年前去某公司面试的时候,曾经被问过这个问题,如何在页面上拖放元素,尽管现在看起来很简单,但当时的我半点思路都没有,面试想当然失败了. 这两天趁空闲整理出一个自由拖拽的jquery插件:jquery.jsDrag.js. js拖拽主要用到了鼠标三个事件:mousedown.mousemove.mouseup. mousedown:鼠标按下 mouseup:鼠标松开 mousemove:鼠标移动 mousedown和clic…

jQuery插件（拖拽）

拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector). draggable({options}) options参数为方法调用时的配置对象,根据该对象可以设置各种拖曳效果,如“containment”属性指定拖曳区域,“axis”属性设置拖曳时的坐标方向. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T…

jquery插件之拖拽改变元素大小

该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被拖拽元素的最小宽高和最大宽高.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona…

jquery插件之拖拽

该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽效果,您可以根据自己的实际需求来设置被拖拽元素是否可以被拖拽至可视区域以外.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d…

jQuery网页元素拖拽插件

效果说明:配合已有CSS样式,载入插件后,网页元素可以随意在窗口内拖拽,设置了原位置半透明和拖拽半透明的效果选项,可根据需要选择.另外,当页面上有多个可拖拽元素时,可以载入另外一个用于设置z-index的插件,模拟Windows窗口点击置顶效果.演示地址:http://frontendcode.sinaapp.com/J-Lui/jQuery-jLdraggable-plugin/ js/jquery.jLdraggable.js: ;(function($){ $.fn.extend({ "j…

Jquery.Sorttable 桌面拖拽自定义

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Sortable - Portlets</title> <script src="jquery-1.6.2.js"></script> <script src="jquery.u…

[javascript]一种兼容性比较好的简单拖拽

作为一个马上要找工作.非计算机专业.热爱前端的大四狗,最近开始疯狂写demo.看书,准备九.十月份的校招. 晚上用js实现了一个比较简单(low)的拖拽效果,初步测试兼容性还是不错的,于是写一段小博文记录下~大神求轻喷面向过程的写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</titl…

jQuery内容横向拖拽滚动

如果有业务需求:使用横向滚动,而又不想用滚动条,可以使用横向拖拽滚动,主要是利用元素的scrollLeft特性: 废话不多说直接上代码: css: .box{ width:100%; height:30px; line-height:30px; overflow:hidden; } .box-container{ cursor: move; white-space:nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-use…

Jquery实现可拖拽的树菜单

效果图例如以下所看到的:下载地址http://download.csdn.net/detail/javaquentin/8290417 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&q…

Unity UGUI 实现简单拖拽功能

说到拖拽,那必然离不开坐标,UGUI 的坐标有点不一样,它有两种坐标,一种是屏幕坐标,还有一种就是 UI 在Canvas内的坐标(暂时叫做ugui坐标),这两个坐标是不一样的,所以拖拽就需要转换. 因为鼠标的移动是屏幕坐标,而 UI 的移动是ugui坐标.转换的方法: RectTransformUtility.ScreenPointToLocalPointInRectangle ( … ); 这个方法可以把屏幕坐标转换成 ugui 坐标.这里我们只需要知道 UI 的坐标和鼠标的坐标是不一样的,他…

Jquery 多行拖拽图片排序 jq优化

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery图片拖动排序代码</title> <style type="text/css"> .item_container{position:relative;height:auto;overflow:hidden;} .item_content ul{list-…

WPF简单拖拽功能实现

1.拖放操作有两个方面:源和目标. 2.拖放操作通过以下三个步骤进行: ①用户单击元素,并保持鼠标键为按下状态,启动拖放操作. ②用户将鼠标移到其它元素上.如果该元素可接受正在拖动的内容的类型,鼠标指针会变成拖放图标. ③用户释放鼠标键时,元素接收信息并决定如何处理接收到的信息.在没有释放鼠标键时,可按下Esc键取消该操作. 3.Demo 下面实例是一个界面中分上下两个Label.当鼠标点击并拖拽上方Label到下方时,下方Label显示上方Label的内容. XAML代码: <Window x…

Javascript:简单拖拽效果的实现

核心代码: /* *完成一个拖拽事件由三大事件组成: *1:onmousedown:选择元素 *2:onmousemove:移动元素 *3:onmouseup:释放元素 */ function drag(obj){ obj.onmousedown=function(ev){ var ev=ev || event; var disX=ev.clientX-this.offsetLeft; var disY=ev.clientY-this.offsetTop; //IE下选中文字后移动时,文字跟着移…

好玩的原生js的简单拖拽

这个拖拽的图片不是唯一的,拿到代码自己添加一张照片就可以啦 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding:0; } body{ height: 100%; width: 100%; background: #0086B3; } #box{ width: 1…

js实现简单拖拽效果

方法如下: var params = { left: 0, top: 0, currentX: 0, currentY: 0, flag: false }; var getCss = function(o,key){ return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key]; }; var startDrag = function(bar, target, ca…