jQuery拖動(dòng)圖片刪除示例
更新時(shí)間：2013年05月10日 17:17:57 作者：
存儲(chǔ)的是被拖動(dòng)的圖片的初始坐標(biāo)，為兩個(gè)變量設(shè)置被拖動(dòng)圖片的初始坐標(biāo)，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈
復(fù)制代碼 代碼如下:
<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 () {
//存儲(chǔ)的是被拖動(dòng)的圖片的初始坐標(biāo)
var startleft = 0;
var starttop = 0;
$('img').draggable({
start: function () {
//為兩個(gè)變量設(shè)置被拖動(dòng)圖片的初始坐標(biāo)
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 {
//復(fù)位
$(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 批量上傳圖片實(shí)現(xiàn)代碼
- Jquery插件之多圖片異步上傳
- Jquery ajaxsubmit上傳圖片實(shí)現(xiàn)代碼
- 基于jquery實(shí)現(xiàn)的上傳圖片及圖片大小驗(yàn)證、圖片預(yù)覽效果代碼
- jquery 圖片上傳按比例預(yù)覽插件集合
- jquery的ajaxSubmit()異步上傳圖片并保存表單數(shù)據(jù)演示代碼
- jQuery實(shí)現(xiàn)圖片放大預(yù)覽實(shí)現(xiàn)原理及代碼
- jquery實(shí)現(xiàn)兼容瀏覽器的圖片上傳本地預(yù)覽功能
- 基于JQuery實(shí)現(xiàn)圖片上傳預(yù)覽與刪除操作
相關(guān)文章
jQuery清除定時(shí)任務(wù)的實(shí)現(xiàn)
jQuery中使用setInterval函數(shù)設(shè)置定時(shí)任務(wù),并通過clearInterval函數(shù)來清除這些任務(wù),從而避免資源浪費(fèi)或邏輯混亂,具有一定的參考價(jià)值,感興趣的可以了解一下2024-09-09
這篇文章主要介紹了jquery中each方法使用及常用選擇器都有哪些，需要的朋友，可以參考下2014-07-07
jquery 禁止鼠標(biāo)右鍵并監(jiān)聽右鍵事件
本篇文章主要介紹了jquery禁止鼠標(biāo)右鍵并監(jiān)聽右鍵事件的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04
最近的項(xiàng)目中，好幾次用到操作文本域的方法，比如光標(biāo)位置、刪除光標(biāo)前字符等。每次都是查閱資料（這部分操作涉及到的js方法都比較生僻），費(fèi)時(shí)費(fèi)事。于是就封裝了一個(gè)jQuery擴(kuò)展2014-03-03
JQuery中基礎(chǔ)過濾選擇器用法實(shí)例分析
這篇文章主要介紹了JQuery中基礎(chǔ)過濾選擇器用法,涉及jQuery屬性選擇及樣式操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05
WEB前端開發(fā)都應(yīng)知道的jquery小技巧及jquery三個(gè)簡(jiǎn)寫
一個(gè)簡(jiǎn)單技巧的集合，幫你提升 jQuery 技能，下面腳本之家小編給大家收集整理了web前端開發(fā)都應(yīng)知道的jquery小技巧，對(duì)jquery小技巧感興趣的朋友一起學(xué)習(xí)吧2015-11-11
這篇文章主要為大家詳細(xì)介紹了Jquery Easyui表單組件Form的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
jsTree 基于JQuery的排序節(jié)點(diǎn) Bug
jsTree(JQuery) 排序節(jié)點(diǎn) Bug的解決方法。2011-07-07
Jquery網(wǎng)頁出現(xiàn)的亂碼問題的三種解決方法
很多時(shí)候，在網(wǎng)上下的一些Jquery插件，在頁面運(yùn)行時(shí)出現(xiàn)亂碼問題，我總結(jié)了三點(diǎn)，希望對(duì)大家有所幫助：2013-06-06
本篇文章主要介紹了Jquery-data的三種用法。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04