<div class="codetitle"> <span><a style="CURSOR: pointer" data="2991" class="copybut" id="copybut2991" onclick="doCopy('code2991')"><u>复主代码</u></a></span> 代码如下:</div> <div class="codebody" id="code2991"> <br><head> <br><제목></제목> <br><style type="text/css"> <br>#mydiv <br>{ <br>너비: 900px; <br>배경색: #444; <br>위치: 절대; <br>왼쪽: 100px; <br>} <br>img <br>{ <br>너비: 200px; <br>높이: 200px; <br>} <br>ul <br>{ <br>list-style-type: 없음; <br>높이: 200px; <br>} <br>ul li <br>{ <br>display: inline; <br>} <br></style> <br><script src="js/Jquery1.7.js" type="text/javascript"></script> <br><script src="js/jquery.ui.core.js" type="text/javascript"></script> <br><script src="js/jquery.ui.widget.js" type="text/javascript"></script> <br><script src="js/jquery.ui.mouse.js" type="text/javascript"></script> <br><script src="js/jquery.ui.draggable.js" type="text/javascript"></script> <br><script type="text/javascript"> <br>$(function () { <br>//存储的是被拖动적그림적初始坐标 <br>var startleft = 0; <br>var starttop = 0; <br>$('img') .draggable({ <br>start: function () { <br>//为两个变weight设置被拖动图文的初始坐标 <br>startleft = $(this).offset().left; <br>starttop = $(this).offset().top; <br>}, <br>중지: function () { <br>if ($(this).offset().left > $('#mydiv') .offset().left $('#mydiv').width() || $(this).offset().top > $('#mydiv').offset().top $('#mydiv' ).height()) { <br>$(this).remove(); <br>} <br>else { <br>//复位 <br>$(this).offset({ <br>왼쪽: startleft, <br>top: starttop <br>}) <br>} <br>} <br>}) <br></script> <br></head> <br><본문> <br><div id="mydiv"> <br><ul> <br><li> <br><img src="images/img2.jpg" /></li> <br><li> <br><img src="images/img3.jpg" /></li> <br><li> <br><img src="images/img4.jpg" /></li> <br><li> <br><img src="images/img5.jpg" /></li> <br></ul> <br></div> <br></body> <br><br> </div>效果图 <br><br><img src="http://files.jb51.net/file_images/article/201305/2013510171307442.jpg?2013410171341" alt="jQuery 드래그 이미지 삭제 example_jquery" ><br>
