如何使用jQuery Draggable和Droppable实现拖拽功能
2个回答
展开全部
juqery easy-ui 里面有着这两个功能,看着API做很简单,给你个参考脚本
<div class="row-fluid">
<div>
<div id="draggable"><dl></dl></div>
</div>
<div>
<div id="droppable"><dl></dl></div>
</div>
</div>
//拖拽控件初始化
function InitDrop() {
$("#draggable dd").draggable({
addClasses: false,
appendTo: "body",
helper: "clone",
opacity: 0.65,
cursor: "move",
cursorAt: { right: 0 },
revert: false //当元素拖拽结束后，元素回到原来的位置
});
$("#droppable").droppable({
addClasses: false,
activeClass: "hover_color",
hoverClass: "hover_color",
accept: "dd",
tolerance: "touch",
drop: function (event, ui) {
$(this).find('dl').append(ui.draggable);
},
out: function (event, ui) { //当一个被允许（accept）的可拖拽元素移出可拖放元素时激活。
$("#draggable").find('dl').append(ui.draggable)
}
}).sortable();
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
七鑫易维信息技术
2024-09-02 广告
Play Video 七鑫易维是致力于机器视觉和人工智能领域的高新科技企业，迄今已专注眼球追踪技术的研发、创新与应用超过14年，拥有完全自主知识产权，全球专利总量655余项。 作为眼球追踪技术领域的全球知名品牌，七鑫易维的产品体系覆盖眼动分...
点击进入详情页
本回答由七鑫易维信息技术提供
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>checkbox</title>
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="js/1.js" type="text/javascript"></script>
</head>
<body>
<table id="table1">
<tr>
<td><input type="checkbox" value="1"/>1</td>
<td id="k_1"><input type="text" name="student" id="s_1" readonly="true"/></td>
</tr>
<tr>
<td><input type="checkbox" value="2"/>2</td>
<td id="k_2"><input type="text" name="student" id="s_2" readonly="true"/></td>
</tr>
<tr>
<td><input type="checkbox" value="3"/>3</td>
<td id="k_3"><input type="text" name="student" id="s_3" readonly="true"/></td>
</tr>
<tr>
<td><input type="checkbox" value="4"/>4</td>
<td id="k_4"><input type="text" name="student" id="s_4" readonly="true"/></td>
</tr>
</table>
</body>
</html>
-------------------------------------------------------------
$(document).ready(function() {
$("td[id^='k_']").hide();
var check = $(":checkbox"); //得到所有被选中的checkbox
var actor_config; //定义变量
check.each(function(i){
actor_config = $(this);
actor_config.click(
function(){
if($(this).attr("checked")==true){
$("#k_"+$(this).val()).show();
}else{
$("#k_"+$(this).val()).hide();
}
}
);
});
});
<html>
<head>
<title>checkbox</title>
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="js/1.js" type="text/javascript"></script>
</head>
<body>
<table id="table1">
<tr>
<td><input type="checkbox" value="1"/>1</td>
<td id="k_1"><input type="text" name="student" id="s_1" readonly="true"/></td>
</tr>
<tr>
<td><input type="checkbox" value="2"/>2</td>
<td id="k_2"><input type="text" name="student" id="s_2" readonly="true"/></td>
</tr>
<tr>
<td><input type="checkbox" value="3"/>3</td>
<td id="k_3"><input type="text" name="student" id="s_3" readonly="true"/></td>
</tr>
<tr>
<td><input type="checkbox" value="4"/>4</td>
<td id="k_4"><input type="text" name="student" id="s_4" readonly="true"/></td>
</tr>
</table>
</body>
</html>
-------------------------------------------------------------
$(document).ready(function() {
$("td[id^='k_']").hide();
var check = $(":checkbox"); //得到所有被选中的checkbox
var actor_config; //定义变量
check.each(function(i){
actor_config = $(this);
actor_config.click(
function(){
if($(this).attr("checked")==true){
$("#k_"+$(this).val()).show();
}else{
$("#k_"+$(this).val()).hide();
}
}
);
});
});
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
