jquery girdster 可以拖拽啥元素比如用table布局 之后实现tr td 的拖拽
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery girdster 可以拖拽啥元素比如用table布局 之后实现tr td 的拖拽相关的知识，希望对你有一定的参考价值。
比如用table布局 之后实现tr td 的拖拽
参考技术A 用jQuery UI，就有插件了，可以去看看。<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） + 排序（Sortable）</title>
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<!--<link rel="stylesheet" href="jqueryui/style.css">-->
<style>
ul list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px;
li margin: 5px; padding: 5px; width: 150px;
.lffloat:left;
.componentwidth:200px; height:400px; border:1px solid #000
.compositionwidth:600px; height:400px; border:1px solid #000;
</style>
<script>
$(document).ready(function()
$( "#sortable" ).sortable(
revert: true
);
$( ".draggable" ).draggable(
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
);
//$( "ul, li" ).disableSelection();
);
$(function()
$( ".draggable" ).draggable( containment: "#sortable", scroll: false );
)
</script>
</head>
<body>
<ul class="lf component">
<li class="ui-state-default draggable">请拖拽我1</li>
<li class="ui-state-highlight draggable">请拖拽我2</li>
<li class="ui-state-highlight draggable">请拖拽我3</li>
<li class="ui-state-highlight draggable">请拖拽我4</li>
<li class="ui-state-highlight draggable">请拖拽我5</li>
<li class="ui-state-highlight draggable">请拖拽我6</li>
<li class="ui-state-highlight draggable">请拖拽我7</li>
</ul>
<ul id="sortable" class="lf composition">
</ul>
</body>
</html>
你可以借鉴下 参考技术B
实现拖拽可以考虑使用jqgrid，jqgrid有以下几个特点：
轻量级
容易上手
方便灵活
可配置
因此使用jqgrid可以解决该问题。
以上是关于jquery girdster 可以拖拽啥元素比如用table布局 之后实现tr td 的拖拽的主要内容，如果未能解决你的问题，请参考以下文章
jquery选择多个层一起拖拽，比如页面中有10个方块（div），任意选择多个，可以实现一起拖动