jquery - jquery拖动不同形状的div并拖放到容器中
问题描述
我想让不同形状的 div 可拖放到容器中。此外,我们放到容器中的不同形状也可以在容器区域中拖动,并且不会相互重叠。
$(".square").draggable({helper: 'clone'});
$(".rect").draggable({helper: 'clone'});
$("#canvas").droppable({
accept: ".rect, .square",
drop: function(ev,ui){
$(ui.draggable).clone().appendTo(this);
}
});
#canvas {
height: 100px;
border: 1px solid lightgrey;
}
.square, .rect {
display: inline-block;
height: 50px;
width: 50px;
border: 1px solid lightblue;
text-align: center;
}
.square {
background-color: lightyellow;
width: 80px;
}
.rect {
background-color: lightgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div class="square"></div>
<div class="rect"></div>
<div id="canvas"></div>
解决方案
推荐阅读
- bash - 如何遍历行并将增量数字附加到重复项?
- python - 按降序对具有相应字符串的数字进行排序
- react-native - 带有 React Native 的谷歌助手
- magento - Magento 2 动态 UI 表单
- python - 散景中的单独节点和边缘悬停工具?
- sql - Oracle SQL - 视图
- java - 硒中的visiblityOfAllElementsLocatedBy()和presenceOfAllElementsLocatedBy()之间的区别?
- python - Matplotlib 图例未显示在子图上
- php - PHP使用sudo执行bash脚本不起作用
- acumatica - 客户所需的 BusinessAccountMaint 字段