Jquery 드래그 앤 드롭 효과의 전체 예(데모 소스 코드 다운로드 포함)_jquery
- WBOY원래의
- 2016-05-16 15:20:051443검색
이 기사의 예에서는 jquery로 구현된 드래그 앤 드롭 효과를 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
런닝 효과 스크린샷은 다음과 같습니다.
온라인 데모를 보려면 여기를 클릭하세요.
구체적인 코드는 다음과 같습니다.
html 부분:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="tuo.js"></script>
<script type="text/javascript">
$(function(){
$("#box").tuoz();
})
</script>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#box{
height:100px;
width:100px;
background:#666666;
}
#box img{
height:50px;
width:50px;
background:#666666;
}
#big{
height:400px;
width:300px;
background:purple;
}
</style>
</head>
<body>
<div id="box"><img src="http://www.baidu.com/img/baidu_sylogo1.gif"></img></div>
<div id="big"></div>
</body>
</html>
jquery 부분:
(function(){
$.fn.extend({
tuoz:function(){
return this.each(function(){
var $this=$(this);
var ey="";
var ex="";
var mx="";
var my="";
var tx="";
var ty="";
var small_x="";
var small_y="";
var big_height="";
var big_width="";
var big_x="";
var big_y="";
var move="false";
$this.mousedown(function(e){
move="true";
mx=$this.offset().left;
my=$this.offset().top;
ex=e.clientX;
ey=e.clientY;
tx=ex-mx;
ty=ey-my;
small_x=$("#big").offset().left;
small_y=$("#big").offset().top;
big_height=$("#big").height();
big_width=$("#big").width();
big_x=small_x+big_width;
big_y=small_y+big_height;
})
$(document).mousemove(function(e){
ex=e.clientX;
ey=e.clientY;
if(move=="true"){
$this.offset({left:ex-tx,top:ey-ty});
}
})
$this.mouseup(function(e){
move=false;
ex=e.clientX;
ey=e.clientY;
if(ex>=small_x && ey>=small_y && ex<=big_x && ey<=big_y){
$("#big").append($this.html());
}
$this.offset({left:mx,top:my});
})
})
}
})
})(jQuery)
전체 예제 코드를 보려면 여기를 클릭하세요이 사이트에서 다운로드하세요.
jQuery 특수 효과 및 기술과 관련된 더 많은 콘텐츠에 관심이 있는 독자는 이 사이트의 특별 주제인 "jQuery의 일반적인 클래식 특수 효과 요약"
을 확인할 수 있습니다.이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.