jQuery拖動(dòng)圖片刪除示例
<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 抽獎(jiǎng)小程序?qū)崿F(xiàn)代碼
這篇文章主要介紹了jquery 抽獎(jiǎng)小程序的相關(guān)資料,這里提供了詳細(xì)的思路及實(shí)現(xiàn)代碼和實(shí)現(xiàn)效果圖,需要的朋友可以參考下2016-10-10jQuery中;function($,undefined) 前面的分號(hào)的用處
這篇文章主要介紹了jQuery中;function($,undefined) 前面的分號(hào)的用處,需要的朋友可以參考下2014-12-12jQuery常用事件方法mouseenter+mouseleave+hover
這篇文章主要介紹了jQuery常用事件方法mouseenter、mouseleave和hover方法,下文內(nèi)容介紹詳細(xì),需要的小伙伴可以參考一下2022-03-03jQuery增加、刪除及修改select option的方法
這篇文章主要介紹了jQuery增加、刪除及修改select option的方法,涉及jQuery針對(duì)form表單中select選項(xiàng)的常見操作技巧,需要的朋友可以參考下2016-08-08jquery checkbox無(wú)法用attr()二次勾選問(wèn)題的解決方法
下面小編就為大家?guī)?lái)一篇jquery checkbox無(wú)法用attr()二次勾選問(wèn)題的解決方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07jQuery實(shí)現(xiàn)IE輸入框完成placeholder標(biāo)簽功能的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)IE輸入框完成placeholder標(biāo)簽功能的方法,涉及jQuery事件響應(yīng)及針對(duì)頁(yè)面元素屬性的動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-09-09jquery實(shí)現(xiàn)向下滑出的二級(jí)導(dǎo)航下滑菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)向下滑出的二級(jí)導(dǎo)航下滑菜單效果,涉及jquery實(shí)現(xiàn)頁(yè)面結(jié)點(diǎn)樣式動(dòng)態(tài)變換效果的實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08jQuery的Scrollify插件實(shí)現(xiàn)滑動(dòng)到頁(yè)面下一節(jié)點(diǎn)
這篇文章主要介紹了jQuery的Scrollify插件實(shí)現(xiàn)滑動(dòng)到頁(yè)面下一節(jié)點(diǎn)的相關(guān)資料,需要的朋友可以參考下2015-07-07基于jquery的bankInput銀行卡賬號(hào)格式化
jquery bankInput插件是銀行卡進(jìn)行格式化顯示,能控制文本框輸入最小最大個(gè)數(shù)、控制只能輸入數(shù)字、控制不能粘貼不能使用輸入法。同時(shí)插件能實(shí)現(xiàn)自動(dòng)加載格式化顯示和支持非輸入框的格式話顯示2012-08-08