jquery girdster 可以拖拽什么元素比如用table布局 之后实现tr td 的拖拽
2个回答
展开全部
用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; }
.lf{float:left;}
.component{width:200px; height:400px; border:1px solid #000}
.composition{width: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>
你可以借鉴下
<!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; }
.lf{float:left;}
.component{width:200px; height:400px; border:1px solid #000}
.composition{width: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>
你可以借鉴下
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
