2 드래그 앤 드롭 효과

다음은 드래그 앤 드롭을 통해 EasyU에 대해 알아보겠습니다.이 강좌는 HTML 요소를 드래그 앤 드롭할 수 있는 방법을 보여 줍니다.이 예에서는 3개의 DIV 요소를 만든 다음 드래그 앤 드롭 가능하게 만듭니다.
먼저 EasyUIDemo 디렉토리에 myDemo 폴더를 만듭니다.Dreamware를 사용하여 dragTest라는 새 html 문서를 만듭니다.html.
코드 목록 2-1과 같이 헤드 탭 사이에 세 개의 문장을 삽입합니다.
코드 목록 2-1 dragTest.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>    </title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css" />
<script type="text/javascript" src="../jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
</head>

<body>
</body>
</html>

주의: 모든 EasyUI 파일은 EasyUIDemo 폴더에 있습니다. 필요한 파일만 html 문서로 가져옵니다.
EasyUI의 드래그 효과와 구현 방법은 다음과 같습니다.
2.1 class 속성을 사용하여 드래그 효과 설정
바디 태그에 다음과 같은 두 개의 div를 생성합니다.

<div id="dd1" class="">    1</div>
<div id="dd2" class="easyui-draggable">    2</div>

div 모양새를 설정하고 head에 삽입하려면 다음과 같이 하십시오.

<style type="text/css">
div{
	width:100px;
	height:100px;
	background-color:#CCC;
}
</style>

div에서 두 번째class 속성을 easyui-draggable로 설정합니다.웹 페이지를 새로 고치면 첫 번째 드래그 테스트는 드래그할 수 없고 두 번째 테스트는 드래그할 수 있습니다.
2.2 JS를 사용하여 드래그 효과를 실현하거나 js 코드를 사용하여div의 드래그 효과를 실현할 수 있으며 헤드 탭에 다음과 같이 추가할 수 있다.

<script type="text/javascript">
$(function(){
	$('#dd1').draggable();// id dd1         
 });
</script>

두 div 탭이 모두 드래그 기능을 가지고 있음을 알 수 있도록 테스트가 실행되었습니다.
위의 두 가지 예제에서는 EasyUI를 사용하여 공식 Demo와 같은 다양한 드래그 효과를 얻을 수 있습니다.
http://www.jeasyui.com/tutorial/dd/dnd1_demo.html
다음에 우리가div를 드래그할 때 원래의 위치와div를 드래그합니다. 마우스 왼쪽 단추를 놓으면 원래의div가 사라집니다.
바디에 div 추가하기

<div id="dd3" class="">    3</div>

$(function () {및});사이 삽입:

$('#dd2').draggable({
    proxy:'clone' // id dd2 div    proxy    ，  clone      
});

세 번째 DIV 요소는 proxy로 드래그하고,proxy:'clone'은 proxy가 원시 요소의 복사를 사용한다는 것을 의미합니다.
마지막으로 이루어진 효과는 사용자 정의 드래그 효과입니다. 즉,proxy:'clone'을 사용하는 것과 유사하며, 지식 드래그의div 효과는 사용자 정의할 수 있습니다.
div 새로 추가:

<div id="dd4" class="">    4</div>

js 코드를 삽입하려면 다음과 같이 하십시오.

$('#dd4').draggable({
	proxy:function(source){//       
		var p = $('<div>proxy</div>'); //    div  
		//    div    body   （   dd4 ，   div  ）
		p.appendTo('body');
		return p; //proxy         div  p
	}
});

첨부: dragTest.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>    </title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css" />
<script type="text/javascript" src="../jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<style type="text/css">
div{
	width:100px;
	height:100px;
	background-color:#CCC;
}
</style>
<script type="text/javascript">
$(function(){
	$('#dd1').draggable();// id dd1         
	$('#dd3').draggable({
        // id dd2 div    proxy    ，  clone      
    	proxy:'clone' 
	});
	$('#dd4').draggable({
		proxy:function(source){//       
			var p = $('<div>proxy</div>'); //    div  
			//    div    body   （   dd4 ，   div  ）
			p.appendTo('body');
			return p; //proxy         div  p
		}
	});

});
</script>
</head>
<body>
<div id="dd1" class="">    1</div>
<div id="dd2" class="easyui-draggable">    2</div>
<div id="dd3" class="">    3</div>
<div id="dd4" class="">    4</div>
</body>
</html>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

2 드래그 앤 드롭 효과

좋은 웹페이지 즐겨찾기