<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#gitem{
overflow: hidden;
}
#gitem ul{
overflow: hidden;
margin:10px;
height: 200px;
width: 150px;
float: left;
border:5px solid red;
}
#gitem ul li{
border:1px solid green;
list-style: none;
text-align: center;
margin-left: -40px;
}
.delarea{
height: 400px;
width: 200px;
border:3px solid green;
background:green;
float: left;
writing-mode:tb-rl;
font-size: 40px;
text-align: center;
line-height: 200px;
}
.abc{
background:green;
}
.bcd{
background:yellow;
}
.triangle_border_up{
width:0;
height:0;
border-width:0 103px 200px;
border-style:solid;
border-color:transparent transparent #333;/*透明 透明 灰*/
position:relative;
}
</style>
<link rel="stylesheet" href="jqueryui/jquery-ui.min.css">
<script src="js/jquery.min.js"> </script>
<script src="jqueryui/jquery-ui.min.js"></script>
</head>
<body>
<div class="triangle_border_up">
<span></span>
</div>
<div id="gitem">
<div class="delarea">垃圾箱</div>
<ul class="uleft">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
<ul class="uright"></ul>
</div>
</body>
</html>
<script>
$(".uleft").sortable({
stop:function(event,el){
console.log(el)
},
})
$(".uleft").disableSelection();
function disable(){
$(".uleft").selectable("option","disable",true)
}
$(".uleft").selectable({
tolerance:"touch",
classes:{
"ui-selected":"abc"
},
selecting:function(event,el){
$(el.selecting).css({
color:"red"
})
},
})
$(".uleft li").draggable({helper:"clone"});
$(".uright,.uleft").droppable({
drop:function(event,el){
console.log(el);
$(this).append(el.draggable)
}
});
$(".delarea").droppable({
drop:function(event,el){
el.draggable.remove();
}
})
</script>用jq實現拖拽效果
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
JavaScript 音頻插件和圖表插件
howler音頻插件 配置項及事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <s
JavaScript中的window對象
window對象：每一個該對象代表一個瀏覽器窗口 1.常用方法如下 open("要打開的頁面文件名","打開窗口在操作系統中的名稱(任何名稱都可以)", "toolbar=?,menubar=?,