javascript - 可在非列表元素上选择
问题描述
我有一个例子,我将元素拖放到放置区域。基本上这个区域内的所有元素都被克隆了。我也想在这个区域实现可选,但是有一个问题——如何选择不属于列表的元素?
我想在非列表元素上实现可选。我已经设置
$(".ui-layout-center").selectable();
在可放置的 div 中,当我尝试用鼠标选择区域时,我看到了套索,如下图所示:
如何选择那些元素?它们不是列表的一部分,它们是被删除的克隆。
代码:
function setDraggable(el) {
el.draggable({
helper: 'original',
revert: false,
cursor: 'move'
});
}
function setResizable(el){
el.resizable({
});
}
$(function() {
$(".ui-layout-center").selectable();
$(".component").draggable({
helper: function() {
$clone = $(this).clone();
$clone.appendTo('body').css({'zIndex': 5});
return $clone;
},
cursor: 'copy',
containment: "document"
});
$('.ui-layout-center').droppable({
activeClass: 'ui-state-hover',
accept: '.component',
drop: function(event, ui) {
if (!ui.draggable.hasClass("dropped"))
var clone= $(ui.draggable).clone().addClass("dropped").draggable();
if(clone){
clone.css('left',ui.position.left);
clone.css('top',ui.position.top);
$(this).append(clone);
setDraggable(clone);
setResizable(clone);
}
}
});
});
CSS:
.ui-layout-center {
width: 800px;
height: 800px;
border: 1px solid black;
}
.ui-state-hover {
background-color: #f9ffff;
}
.ui-layout-center .component {
position:absolute !important;
}
.component{
width: 50px;
height: 50px;
background-color: yellow;
border: 1px solid black;
margin: 3px;
}
HTML:
解决方案
推荐阅读
- r - 在没有 RSelenium 的情况下在 R 中抓取帧?
- react-native - 如何将对象映射到 Material-ui 输出
- azure - 如何创建 Azure API 网关资源?
- php - 使用 Symfony 5/Twig“数组到字符串转换”的嵌套数组问题
- java - 我得到一个变量值为零,即使它在java中分配了一些值
- angular - SASS 样式未完全加载
- node.js - 将信息从数据库返回到服务器 - 异步/回调函数语法?
- python - 从invest.com 上抓取历史经济数据
- python - macOS 上的 Python“DPI-1047 无法找到 dlopen(libclntsh.dylib)”
- python - 在 python 中跨实例缓存大型数据结构,同时维护类型