jQuery拖動圖片刪除示例
更新時間：2013年05月10日 17:17:57 作者：
存儲的是被拖動的圖片的初始坐標，為兩個變量設置被拖動圖片的初始坐標，具體實現如下，感興趣的朋友可以參考下哈
復制代碼 代碼如下:
<head>
<title></title>
<style type="text/css">
#mydiv
{
width: 900px;
background-color: #444;
position: absolute;
left: 100px;
}
img
{
width: 200px;
height: 200px;
}
ul
{
list-style-type: none;
height: 200px;
}
ul li
{
display: inline;
}
</style>
<script src="js/Jquery1.7.js" type="text/javascript"></script>
<script src="js/jquery.ui.core.js" type="text/javascript"></script>
<script src="js/jquery.ui.widget.js" type="text/javascript"></script>
<script src="js/jquery.ui.mouse.js" type="text/javascript"></script>
<script src="js/jquery.ui.draggable.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//存儲的是被拖動的圖片的初始坐標
var startleft = 0;
var starttop = 0;
$('img').draggable({
start: function () {
//為兩個變量設置被拖動圖片的初始坐標
startleft = $(this).offset().left;
starttop = $(this).offset().top;
},
stop: function () {
if ($(this).offset().left > $('#mydiv').offset().left + $('#mydiv').width() || $(this).offset().top > $('#mydiv').offset().top + $('#mydiv').height()) {
$(this).remove();
}
else {
//復位
$(this).offset({
left: startleft,
top: starttop
})
}
}
});
})
</script>
</head>
<body>
<div id="mydiv">
<ul>
<li>
<img src="images/img2.jpg" /></li>
<li>
<img src="images/img3.jpg" /></li>
<li>
<img src="images/img4.jpg" /></li>
<li>
<img src="images/img5.jpg" /></li>
</ul>
</div>
</body>
效果圖
相關文章
jQuery中使用setInterval函數設置定時任務,并通過clearInterval函數來清除這些任務,從而避免資源浪費或邏輯混亂,具有一定的參考價值,感興趣的可以了解一下2024-09-09
這篇文章主要介紹了jquery中each方法使用及常用選擇器都有哪些，需要的朋友，可以參考下2014-07-07
本篇文章主要介紹了jquery禁止鼠標右鍵并監(jiān)聽右鍵事件的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
最近的項目中，好幾次用到操作文本域的方法，比如光標位置、刪除光標前字符等。每次都是查閱資料（這部分操作涉及到的js方法都比較生僻），費時費事。于是就封裝了一個jQuery擴展2014-03-03
這篇文章主要介紹了JQuery中基礎過濾選擇器用法,涉及jQuery屬性選擇及樣式操作的相關技巧,需要的朋友可以參考下2015-05-05
WEB前端開發(fā)都應知道的jquery小技巧及jquery三個簡寫
一個簡單技巧的集合，幫你提升 jQuery 技能，下面腳本之家小編給大家收集整理了web前端開發(fā)都應知道的jquery小技巧，對jquery小技巧感興趣的朋友一起學習吧2015-11-11
這篇文章主要為大家詳細介紹了Jquery Easyui表單組件Form的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
jsTree(JQuery) 排序節(jié)點 Bug的解決方法。2011-07-07
很多時候，在網上下的一些Jquery插件，在頁面運行時出現亂碼問題，我總結了三點，希望對大家有所幫助：2013-06-06
本篇文章主要介紹了Jquery-data的三種用法。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04