做应用的时候 万一 被要求 页面内容可以被拖拽 。。。 可以试试 jquery的tableDnD.js
DnD个人感觉是Drag and Drop的意思哈
要用它的前提 当然是 把它引入到文件中嘛
然后呢,呵呵 写个简单的table试试呗
<table id="table-1" cellspacing="0" cellpadding="2"> <tr id="1"><td>1</td><td>One</td><td>some text</td></tr> <tr id="2"><td>2</td><td>Two</td><td>some text</td></tr> <tr id="3"><td>3</td><td>Three</td><td>some text</td></tr> <tr id="4"><td>4</td><td>Four</td><td>some text</td></tr> <tr id="5"><td>5</td><td>Five</td><td>some text</td></tr> <tr id="6"><td>6</td><td>Six</td><td>some text</td></tr> </table>
这回就直接复制网上的代码搞搞算了
然后 最神奇的东东加进去:
<script type="text/javascript"> $(document).ready(function() { // 让id=table-1的表格,调用一下tableDnD()方法,这样我们的表格就可以被拖拽了 $("#table-1").tableDnD(); }); </script>
这样不方便的是 我们不能看到是哪一行被拖拽了,呵呵 这个别人已经想到了的
在调用$("#table-1").tableDnD();方法时加入一些参数就可以了
先写一个css 可以命名为myDragClass
然后 配置一下
$("#table-1").tableDnD(function(){ dragClass:"myDragClass" });
还有就是我要知道 被拖拽的那一行,拖拽后应该给出信息,假设弹窗那就要加alert了
只需要在上面的基础之上添加 tr.myDragClass td {color: yellow; background-color: #D2DFF2;}
$("#table-1").tableDnD(function(){ dragClass:"myDragClass", onDrop:function(table,row){alert('测试');} });
不过我发现要让onDrop方法能够正常跑起来还要有个地方要注意原来的数据中tr有属性值ID这个还是按照顺序排列的,如果不配置这个部分的话,onDrop事件不会执行。其实用的时候动态的给它加上id并且递增就行了
相关推荐
jQuery实现可拖拽的树行菜单,根据json数据实现可拖拽操作,可直接运用于项目中,十分简单,方便使用!
Jquery Portal布局组件,可以进行拖拽、关闭、展开、收缩等操作,并可以自定义比例,按比例进行布局。是在基于别人基础上做了一些修改,支持主流浏览器,并且支持IE8、IE9、IE10等。
使用jquery和jQuery drag and drop库实现的一个列表插件。使用html中的ol标签实现,可支持上移,下移,删除,撤销删除等操作,并支持对用的键盘操作,ctrl+z:撤销删除,up键:向上选中,ctrl+up:上移等,支持拖拽。
基于JQuery的拖拽布局。自己将组建编写即可。解压后运行index.html即可查看操作。
jQuery鼠标上下拖动div排序代码、鼠标拖动层改变排列顺序,div左上角还有按钮操作,点击只是弹窗提示效果。
html5 jquery拖动排序- 支持IOS,Android等移动端和PC的拖拽排序功能,鼠标拖动DIV方格即可自动排序到其它地方,智能排序,类似前几年的博客主页模块定制功能,支持IOS,Android等移动端和PC的拖拽排序功能,操作...
100. 打包jquery拖动条拖动图片缩略图及放大图片效果插件(翻版thickbox插件) 101. 打包基于jQuery对图片边框修饰插件示例下载(支持图片阴影效果、顶部banner效果、邮票边框、毛边相框、云朵包围效果) 102. 推荐...
jquery主导实现的Js拖动特效,模拟了拖动商品添加到购物车的功能,购物车droppable所使用的插件:ui.base.min.js、ui.draggable.min.js、ui.droppable.min.js。 在示例中,左侧为商品,右侧为购物车,操作时按住...
很简单的小实例,用来熟练jQuery的鼠标操作的相关功能;操作简单,适合初学者拿来巩固练习,可以通过轻微简单的改动实现不同的操作功能
在背景平面图上创建和编辑区块,包括区块描述和其他操作,如选择颜色,编辑,删除等,支持背景拖拽移动和区块拖拽移动
自己独立研究2天结晶,本项目利用Jquery sorttable插件实现,可以实现任意拖拽并保存数据库,思路简单易学,初始化时展示拖拽后的结果。本项目附有数据库,直接附加便可运行操作。如有疑问请联系1096012618
这个插件是由苏文博于2015年4月18日在西安开发的基于jquery的图标纵向排序拖放插件,图标可以纵向排序,并且可以类似win7桌面一样,自由拖放。可适用于web桌面的图标操作。
jQuery实现可拖拽的树菜单,根据json数据实现可拖拽操作,可直接运用于项目中
jquery 创建div块 拖动 布局代码 拖动操作 特效处理 。
jquery 树控件 万能树 拖拽 添 删 改 大数据操作 ajax操作 代码清晰便于重构 修改
Jquery 实现页面有一个可以随着滚动条拖动存在的操作层。同时具有回到顶部和回到底部的操作功能。
8.4 综合案例分析—使用jQuery UI插件以拖动方式管理相册/269 8.4.1 需求分析/269 8.4.2 效果界面/269 8.4.3 功能实现/270 8.4.4 代码分析/274 8.5 本章小结/277 第9章 jQuery实用工具函数/278 9.1 什么是...
可指定在元素附近弹出,让操作更便捷;智能给按钮添加焦点;黄金比例垂直居中;超大响应区域特别为ipad等触屏设备优化;预先缓存皮肤图片更快响应…… 跨平台兼容 兼容:IE6+、Firefox、Chrome、Safari、Opera以及...
超实用的jQuery代码段精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。...11.32 使用jQuery操作DOM的限制
JQuery 表格操作包括交替显示、拖动表格行、选择行等功能,大家可以参考下。