-2
我的項目是一個畫布(不是HTML5元素),用戶可以在其中添加圖像,移動它們並調整它們大小。我想將畫布區域設爲「垃圾桶」,拖動時圖像消失。有誰知道如何實現這一點?拖動到垃圾桶jquery
我的項目是一個畫布(不是HTML5元素),用戶可以在其中添加圖像,移動它們並調整它們大小。我想將畫布區域設爲「垃圾桶」,拖動時圖像消失。有誰知道如何實現這一點?拖動到垃圾桶jquery
見一個例子來拖/放和刪除對象..
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<style type="text/css">
#images .img{
padding : 50px;
border : 1px solid #ccc;
width : 50px;
height : 50px;
margin : 25px;
float : left;
}
#trash{
padding : 50px;
background-color : #f1f1f1;
}
</style>
<script type="text/javascript">
$(function(){
$('.img').draggable({
opacity : 0.7,
revert : 'invalid',
helper : 'clone',
zIndex : 100,
cursor : 'move'
});
$('#trash').droppable({
drop : function (event , img) {
var $element = img.draggable;
alert ($element.attr('id')) ;
$element.detach();
}
});
});
</script>
</head>
<body>
<div id="images">
<div class="img" id="1">1</div>
<div class="img" id="2">2</div>
<div class="img" id="3">3</div>
<div class="img" id="4">4</div>
</div> <br clear="both" />
<div id="trash">
-------------
</div>
</body>
</html>
@ Andrey_Knupp - 你能解釋一下'drop'功能嗎?你通過什麼參數?在這種情況下'.draggable'是什麼? – dopatraman
**是**是我做的。請重新說明你的問題,所以它不是**是/否... – Neal