jQuery 的拖拽操作

阅读更多

做应用的时候 万一 被要求 页面内容可以被拖拽 。。。 可以试试 jquery的tableDnD.js

DnD个人感觉是Drag and Drop的意思哈

 

要用它的前提 当然是 把它引入到文件中嘛

 

然后呢，呵呵  写个简单的table试试呗

    
1
One
some text
    
2
Two
some text
    
3
Three
some text
    
4
Four
some text
    
5
Five
some text
    
6
Six
some text

这回就直接复制网上的代码搞搞算了

然后 最神奇的东东加进去：

这样不方便的是  我们不能看到是哪一行被拖拽了，呵呵 这个别人已经想到了的

在调用$("#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并且递增就行了