我正在为我的客户进行拖放式导航设置。
我有拖放工作(基本形式)但是当你点击其中一个要拖动的列表项时,实际的可投放框就会出现在不同的位置。
在没有向您展示的情况下解释是一件很难的事情,所以我在网上找到了它:http://jsfiddle.net/elogicmedia/nVPYQ/7/
李和CSS的CSS
li {
color: black;
list-style: none;
padding: 1em 1em;
}
a {
position: absolute;
text-decoration: none;
border: 0px solid black;
width:98px;
height:98px;
border-radius:50%;
line-height:1.5em;
text-align:center;
font-family: helvetica, arial;
background-color: #C0D9D9;
}
JS DRAG AND DROPPABLE CODE
// let the gallery items be draggable
$( "li" ).draggable({
revert: "invalid", // when not dropped, the item will revert back to its initial position
containment: "document",
helper: "clone",
cursor: "move"
});
// let the trash be droppable, accepting the gallery items
$( "#droparea" ).droppable({
accept: "ul.gallery > li",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
alert('dropped');
//deleteImage( ui.draggable );
}
});
还要注意小提琴右边的边框,有些东西也不对。他们不应该在那里,只有圈子。我的jsfiddle设置截图。
三江源
答案 0 :(得分:0)
我最终自己解决了这个问题。
工作结果如下:
http://jsfiddle.net/elogicmedia/nVPYQ/12/
我试图删除LI标签,但A标签是圆圈,右边的框是LI标签。
新拖放代码
// let the gallery items be draggable
$( "ul.gallery > li a" ).draggable({
revert: "invalid", // when not dropped, the item will revert back to its initial position
containment: "document",
helper: "clone",
cursor: "move"
});
// let the trash be droppable, accepting the gallery items
$( "#droparea" ).droppable({
accept: "ul.gallery > li a",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
alert('dropped');
//deleteImage( ui.draggable );
}
});