easyUI拖动：draggable()方法运用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/default/easyui.css">
<!--<link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/black/easyui.css">-->
<link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/icon.css">
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>面板嵌套</h2>
<p>面板可以放置在容器中，可以包含其他组件。west、east、north、south表示方位；region：地区</p>
<div style="margin:20px 0 10px 0;"></div>
<div class="easyui-panel" title="Nested Panel" style="width:700px;height:200px;padding:10px;">
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'west',split:true" style="width:100px;padding:10px">
西部 Content
</div>
<div data-options="region:'east'" style="width:100px;padding:10px">
东部 Content
</div>
<div data-options="region:'center'" style="padding:10px">
中间 Content
</div>
<div data-options="region:'north'" style="padding:10px">
北部 Content
</div>
<div data-options="region:'south'" style="padding:10px">
南部 Content
</div>
</div>
</div>
<br><br><br><br>
<div id="box1" class="box1" style="width: 100px; height: 100px; background-color: #f00">第一个盒子</div>
<div id="box2" class="box2" style="width: 100px; height: 100px; background-color: #f0f">第二个盒子</div>
<div id="box3" class="box3" style="width: 100px; height: 100px; background-color: yellow">第三个盒子</div>
<script>
$(document).ready(function(){
$('#box1').draggable();//第一个盒子可以随意拖动，且原来的位置被之后的盒子取代
$('#box2').draggable({
//第二个盒子也可以随意拖动，创建一个克隆（clone）了原来元素的代理（proxy）让其可以拖动。
//鼠标放开的瞬间原来的盒子才会消失，否则是一种复制出来的盒子在动的现象。
proxy:'clone'
});
//通过创建自定义代理（proxy）让其可以拖动。且拖动时显示自定义的文本内容
$('#box3').draggable({
proxy:function(source){
var p = $('<div class="proxy">hello 点击拖动会显示我的文本内容</div>');
p.appendTo('body');
return p;
}
});
})
</script>
</body>
</html>
本文来自博客园，作者：小虾米吖~，转载请注明原文链接：https://www.cnblogs.com/LindaBlog/p/9223522.html
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」