jquery.dragsort.js 实现拖拽过程遇到的问题

1、在IE下第一次拖动的时候，被拖动的li元素会不显示，查了很多资料发现是因为在IE中定位出了问题，li标签还在，只是位置计算出错。解决的办法是在li的css样式中position设置为relative。这个问题在火狐等其他浏览器是不存在的。

2、如果拖动的li所在容器出现了滚动条，当滚动条滑到最下面的时候，拖拽下面的li的浮动层位置会出现偏移。解决的办法是在jquery.dragsort.js中，this.draggedItem.css({ top: top, left: left });这句话决定了浮动层的位置，只需将top值加上容器滚动条的scrollTop值即可。

附带jquery.dragsort.js中参数的解释：

dragSelector -- CSS选择器内的元素的列表项的拖动手柄。默认值是“li”。
dragSelectorExclude  -- CSS选择器的元素内的dragSelector不会触发dragsort的。默认值是"input, textarea, a[href]"。
dragEnd  -- 拖动结束后将被调用的回调函数.
dragBetween  -- 设置为“true”，如果你要启用多组列表之间拖动选定的列表。 默认值是false。
placeHolderTemplate  -- 拖动列表的HTML部分。默认值是"<li></li>".
scrollContainer  -- CSS选择器的元素，作为滚动容器，例如溢出的div设置为自动。 默认值是“窗口“.
scrollSpeed  -- 一个数字，它代表了速度，页面拖动某一项时，将滚动容器外，较高使用价值的是速度和较低的值是较慢的。 如果设置为"0"以禁用滚动。默认值是"5".

jquery.dragsort.js 实现拖拽过程遇到的问题,布布扣,bubuko.com

时间： 2024-12-14 05:19:28

jquery.dragsort.js 实现拖拽过程遇到的问题的相关文章

js 利用jquery.gridly.js实现拖拽并且排序

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src='javascripts/jquery.js' type='text/javascript'></script> <script src='javascripts/jqu

JS—实现拖拽

JS中的拖拽示例:    1)实现拖拽思路:当鼠标按下和拖拽过程中,鼠标与拖拽物体之间的相对距离保持不变    2)实现拖拽遇到的问题:        问题1:当鼠标按下移动过快时,离开了拖拽的物体时,这时拖拽物体将不再随着鼠标移动                因为拖拽的div太小了,这时我们可以将在拖拽物体上的mousemove事件放到document上面                同时将mouseup也改为document上面的事件                IE下直接用obj.s

gridster.js–可拖拽的网格插件

gridster.js–可拖拽的网格插件 gridster.js 是一个 jQuery 插件用来构建直观的可拖放的布局,支持多列布局,你还可以动态的添加和删除表格中的元素. \ 主要特性 1.只依赖jQuery 2.支持元素的添加和删除 3.文档比较全 4.拥有测试用例,你可以查看你的浏览器的测试结果 5.比较适合开发益智游戏 如何使用 引入类库,包括jQuery和gridster.js: <script src="http://ajax.googleapis.com/ajax/libs/

用js实现拖拽功能

平常我们在网上可以看到,按住一张图片,然后拖到另一处去,前天在网上看石川(Blue)老师 的js课堂,有见过这个,写下来与大家分享一下: 1,先画个div小红块,样式设置如下: #div1{width: 200px; height: 200px; background-color: red; position:absolute;} 这里的positon属性很重要,如果没有这个,根本拖不动你可以试一下. 2,然后需要用到三个事件,onmousedown, onmousemove, onmouseu

一款基于jQuery的支持鼠标拖拽滑动焦点图

记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即可切换图片. 在线预览   源码下载 实现的代码. html代码: <div class="main_visual"> <div class="flicking_con"> <a class="on" href=&quo

jQuery UI API - 可拖拽小部件（Draggable Widget）(转)

所属类别 交互(Interactions) 用法 描述:允许使用鼠标移动元素. 版本新增:1.0 依赖: UI 核心(UI Core) 部件库(Widget Factory) 鼠标交互(Mouse Interaction) 注释:让被选元素可被鼠标拖拽.如果您不只是拖拽,而是拖拽 & 放置,请查看 jQuery UI 可放置(Droppable)插件,为可拖拽元素提供了一个放置目标. 快速导航 选项 方法 事件 addClasses appendTo axis cancel connectToS

WEB前端开发学习----11. JQuery 实现简单的拖拽效果

拖拽效果在网页中很常见.实现起来也不难.记录一下今天实现的简单效果. 拖拽演示 快速拖动时,会出现问题,以后修改. 说白了,就是3个点击事件. 1. 按下鼠标左键, 触发点击事件,此时记录下可以得到鼠标相对于拖动控件的位置(当前鼠标位置-控件位置): 2. 拖动鼠标,触发移动事件,可以计算出鼠标移动的距离(当前鼠标位置-之前算出的相对位置),也就是拖拽控件所移动的距离: 3. 鼠标抬起,结束拖动. 在JQ中,event.pageX    event.pageY可以获取鼠标的位置,相对于文档左上角

js实现拖拽框

纯js版的拖拽框,该效果很简单 直接看代码..... <!doctype html> <html> <head> <meta charset="urf-8"/> <style> #box{ border:1px solid #ccc; position:absolute; border-radius:4px; border-shadow:10px 10px 5px #888888; } #box h1{ margin:0; p

一个用js实现拖拽的小例子

代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 9 body { 10 margin: 0; 11 } 12 13 #rect { 14 width: 100px; 15 height: 100px; 16 b