jQuery 的拖拽操作

做应用的时候 万一 被要求 页面内容可以被拖拽 。。。 可以试试 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并且递增就行了