不知道怎么让9张图片分区域展示并可以互换位置,嵌套在框架当中
4条回答 默认 最新
- CSDN专家-showbo 2021-06-13 17:23关注
使用easyUI的draggle和dropable来实现拖拽和释放后实现交换就行了。。对你有帮助能点击采纳吗,谢谢~~
DEMO如下
<!DOCTYPE html> <html style="height:100%"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Building a drag-drop shopping cart - jQuery EasyUI Demo</title> <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script> <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> </head> <body style="height:100%;"> <div class="easyui-panel" fit="true" border="false" style="height:100%;overflow:hidden"> <div class="products"> <ul> <li> <img src="http://www.jeasyui.com/demo/main/images/shirt1.gif" /> </li> <li> <img src="http://www.jeasyui.com/demo/main/images/shirt2.gif" /> </li> <li> <img src="http://www.jeasyui.com/demo/main/images/shirt3.gif" /> </li> <li> <img src="http://www.jeasyui.com/demo/main/images/shirt4.gif" /> </li> <li> <img src="http://www.jeasyui.com/demo/main/images/shirt5.gif" /> </li> <li> <img src="http://www.jeasyui.com/demo/main/images/shirt6.gif" /> </li> </ul> </div> </div> <style type="text/css"> .products { overflow: auto; height: 100%; background: #fafafa; } .products ul { list-style: none; margin: 0; padding: 0px; } .products li { display: inline; float: left; margin: 10px; } .products li img { border: 1px solid #333; } </style> <script> $(function () { $('.products img').draggable({ revert: true, proxy: 'clone', onStartDrag: function () { $(this).draggable('options').cursor = 'not-allowed'; $(this).draggable('proxy').css('z-index', 10); }, onStopDrag: function () { $(this).draggable('options').cursor = 'move'; } }).droppable({ onDragEnter: function (e, source) { $(this).css('border-color','#f00') }, onDragLeave: function (e, source) { $(this).css('border-color', '#333') }, onDrop: function (e, source) { var tparent = $(this).css('border-color', '#333').parent(), sparent = $(source).parent(); tparent.append(source); sparent.append(this) } }); }); </script> </body> </html>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 随身WiFi网络灯亮但是没有网络,如何解决?
- ¥15 gdf格式的脑电数据如何处理matlab
- ¥20 重新写的代码替换了之后运行hbuliderx就这样了
- ¥100 监控抖音用户作品更新可以微信公众号提醒
- ¥15 UE5 如何可以不渲染HDRIBackdrop背景
- ¥70 2048小游戏毕设项目
- ¥20 mysql架构,按照姓名分表
- ¥15 MATLAB实现区间[a,b]上的Gauss-Legendre积分
- ¥15 delphi webbrowser组件网页下拉菜单自动选择问题
- ¥15 linux驱动,linux应用,多线程