jQueryEasyUI에서 드래그 앤 드롭 이벤트를 사용하는 방법-JS 튜토리얼-php.cn

jQueryEasyUI에서 드래그 앤 드롭 이벤트를 사용하는 방법

清浅

풀어 주다： 2018-12-12 09:02:09

원래의

2552명이 탐색했습니다.

jQueryEasyUI의 드래그 이벤트는 프록시 요소를 설정하여 드래그할 수 있고, 드래그 요소는 x.y 축을 기준으로 드래그하도록 설정할 수 있으며 드래그가 중지되어야 하는 경우 등을 설정할 수 있습니다.

easyui는 사용하기 매우 쉬운 플러그인이지만, 오늘은 그 기능이 정말 강력합니다. easyui 플러그인을 사용하여 기본 기능을 구현하는 방법은 특정 참조 값을 갖고 있으므로 모든 사람에게 도움이 되기를 바랍니다.

【추천 강좌: jQueryEasyUI Tutorial】

jQueryEasyUI에서 드래그 앤 드롭 이벤트를 사용하는 방법

#🎜 🎜 #

Draggable(Drag)

Draggable은 드래그 앤 드롭 기능을 구현하는 데 사용되는 easyui의 플러그인입니다. 이를 통해 드래그 앤 드롭을 구현할 수 있습니다. 컨트롤에 영향을 미칩니다.

다음과 같은 속성 값이 있습니다.

속성 이름Meaningproxyrevertcursor #🎜🎜 # deltaX 은 현재 커서의 X축을 기준으로 드래그된 요소의 위치를 나타냅니다. 기본값은 null입니다. deltaY 은 현재 커서를 기준으로 드래그된 요소의 Y축 위치를 나타냅니다. 기본값은 null입니다. #🎜🎜 #은 드래그 가능한 요소의 처리 시작을 의미하며 기본값은 null입니다. # 🎜🎜#은 부울 값입니다. true로 설정하면 드래그가 중지되고 기본값은 false입니다. edge 은 드래그 가능 영역 드래그 너비, 기본값은 0입니다. axis 은 드래그 요소가 이동할 수 있는 축을 정의하는 것을 나타냅니다. 사용 가능한 값은 'v' 또는 'h'이며, null로 설정하면 'v'와 'h' 방향으로 이동합니다.

사례 분석:

3개의 div 요소 끌어서 배치 가능

외부 참조를 위한 필수 플러그인

<link rel="stylesheet" type="text/css" href="D:\jquery-easyui-1.6.10\themes\default\easyui.css">
<link rel="stylesheet" type="text/css" href="D:\jquery-easyui-1.6.10\themes\icon.css">
<script src="D:\jquery-easyui-1.6.10\jquery.min.js"></script>
<script src="D:\jquery-easyui-1.6.10\jquery.easyui.min.js"></script>

로그인 후 복사

HTML 및 CSS 코드

<style>
	div{
	width:100px;
	height: 100px;
	margin-bottom:5px;
	text-align: center;
	 line-height: 100px;

	}
	#box1{background: pink;}
	#box2{background: skyblue;}
	#box3{background: yellow;}
</style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>

로그인 후 복사

렌더링:

jQueryEasyUI에서 드래그 앤 드롭 이벤트를 사용하는 방법

box1 요소를 드래그 가능으로 설정

 $(&#39;#box1&#39;).draggable();

로그인 후 복사

Rendering:

jQueryEasyUI에서 드래그 앤 드롭 이벤트를 사용하는 방법

box2의 경우 드래그할 수 있도록 원본 요소의 프록시에 대한 복제 값을 생성합니다.

$(&#39;#box2&#39;).draggable({
        proxy:&#39;clone&#39;
    });

로그인 후 복사

Rendering:

jQueryEasyUI에서 드래그 앤 드롭 이벤트를 사용하는 방법

세 개의 상자에 대해 요소를 다음과 같이 설정합니다. V축에서만 드래그할 수 있습니다:

$("#box3").draggable({
            axis: &#39;v&#39;
  })

로그인 후 복사

Rendering:

jQueryEasyUI에서 드래그 앤 드롭 이벤트를 사용하는 방법

요약: 위 내용은 이 글의 전체 내용입니다. 모든 사람의 학습에 도움이 되기를 바랍니다.

	# 🎜🎜#
은 드래그 시 사용할 프록시 요소를 나타냅니다. 복제로 설정하면 복제된 요소가 됩니다. 프록시로 사용됩니다. 함수가 지정되면 jQuery 객체를 반환해야 합니다.
은 부울 값으로 설정되면 요소가 드래그 후 시작 위치로 돌아간다는 의미입니다. (기본값은 false)
드래그 시 CSS 커서, 기본값은 이동

	handle
	disabled