Heim > Artikel > Web-Frontend > So verwenden Sie Drag-and-Drop-Ereignisse in jQueryEasyUI

So verwenden Sie Drag-and-Drop-Ereignisse in jQueryEasyUI

清浅Original: 2018-12-11 11:09:382450Durchsuche

Das Drag-Ereignis in jQueryEasyUI kann durch Festlegen eines Proxy-Elements gezogen werden. Das Drag-Element kann so eingestellt werden, dass es relativ zur x.y-Achse zieht und wann das Ziehen aufhören soll usw.

Das EasyUI in jQuery ist ein sehr einfach zu verwendendes Plug-In, aber seine Funktionen sind in der Tat sehr leistungsstark. Heute werde ich Ihnen die Verwendung des EasyUI vorstellen Plug-in zum einfachen Ziehen und Platzieren. Es hat einen gewissen Referenzwert und ich hoffe, dass es für alle hilfreich ist.

[Empfohlener Kurs: jQueryEasyUI Tutorial]

So verwenden Sie Drag-and-Drop-Ereignisse in jQueryEasyUI

Draggable(drag)

Draggable ist ein Plug-in in easyui, das zur Implementierung von Drag-and-Drop-Funktionen verwendet wird. Dadurch können wir den Drag-and-Drop-Effekt auf Steuerelementen erzielen.

Es hat die folgenden Attributwerte:

handle tr>

Attributname

Bedeutung

属性名	含义
proxy	指拖动时要使用的代理元素，设置为clone时，克隆元素将被用作代理；如果指定一个函数，它必须返回一个 jQuery 对象。
revert	是一个boolean值，设置为 true时表示拖动结束后元素将返回它的开始位置。（默认值为false）
cursor	拖动时的 css 光标，默认值为move
deltaX	指的是拖动的元素相对于当前光标的 X 轴的位置，默认值为null
deltaY	指的是拖动的元素相对于当前光标的 Y 轴位置，默认值为null
handle	指启动可拖动元素的处理，默认值为null
disabled	是一个boolean值，如果设置为 true，则停止可拖动，默认值为false
edge	指能够在其中开始可拖动的拖动宽度，默认值为0
axis	指定义拖动元素可在其上移动的轴，可用的值是 'v' 或 'h'，当设为 null，将会沿着 'v' 和 'h' 的方向移动

proxy

bezieht sich auf das Proxy-Element, das beim Ziehen verwendet werden soll. Wenn es auf „Klonen“ eingestellt ist, wird das geklonte Element als Proxy verwendet; wenn es sich um eine Funktion handelt angegeben ist, muss es ein jQuery-Objekt zurückgeben.

revert

cursor

Ziehen CSS-Cursor, der Standardwert ist move

deltaX

Bezieht sich auf die Position des gezogenen Elements relativ zur X-Achse des aktuellen Cursors. Der Standardwert ist null

deltaY

bezieht sich auf die Y-Achsenposition des gezogenen Elements relativ zum aktuellen Cursor. Der Standardwert ist null

bezieht sich auf das Starten der Verarbeitung ziehbarer Elemente, der Standardwert ist null

ist ein boolescher Wert. Wenn er auf true gesetzt ist, wird das Ziehen beendet . Der Standardwert ist false

edge

bedeutet das Sie können mit dem Ziehen beginnen. Die Ziehbreite der Bewegung, der Standardwert ist 0

axis

bezieht sich auf die Definition der Achse, auf der sich das Drag-Element bewegen kann ' oder 'h' bewegen sich, wenn sie auf Null gesetzt sind, in die Richtung von 'v' und 'h'

Fallanalyse:

Ermöglicht das Ziehen und Platzieren von drei div-Elementen

Ein unverzichtbares Plug-in für externe Referenzen

<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 und CSS-Code

<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>

Rendering:

So verwenden Sie Drag-and-Drop-Ereignisse in jQueryEasyUI

Legen Sie das Box1-Element als ziehbar fest

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

Rendering:

So verwenden Sie Drag-and-Drop-Ereignisse in jQueryEasyUI

Erstellen Sie für Box2 einen Klonwert für den Proxy des Originalelements, damit es gezogen werden kann

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

Rendering:

So verwenden Sie Drag-and-Drop-Ereignisse in jQueryEasyUI

Für das dritte Feld legen wir fest, dass das Element nur auf der V-Achse gezogen werden soll:

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

Rendering:

So verwenden Sie Drag-and-Drop-Ereignisse in jQueryEasyUI

Zusammenfassung: Das Obige ist das Ich hoffe, dass der gesamte Inhalt dieses Artikels für das Studium aller hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Drag-and-Drop-Ereignisse in jQueryEasyUI. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Zusammenfassung der häufigsten Fragen und Antworten zu JavaScrip-InterviewsNächster Artikel：Zusammenfassung der häufigsten Fragen und Antworten zu JavaScrip-Interviews

In Verbindung stehende Artikel

Mehr sehen