Notice: Undefined variable: this in /home/dimarini/public_html/libraries/src/Application/CMSApplication.php on line 441

Елементи drag и drop

Елементите drag и drop се използва когато се „хваща” определен обект за да се изтегли (drag) и поставя (drop) на определено место. Този елемент в HTML5 е част от стандарта, като може да се мести произволен обект. Той се поддържа от браузърите Internet Explorer 9, Firefox, Chrome и Safari 5.

По-долу е дадена програмка с пример за използване на елемента:
<!DOCTYPE HTML>
<html>
<head>
	<script type="text/javascript">
	function allowDrop(ev)
	     {ev.preventDefault();}
	function drag(ev)
	     {ev.dataTransfer.setData("Text",ev.target.id);}
	function drop(ev)
	     {var data=ev.dataTransfer.getData("Text");
	     ev.target.appendChild(document.getElementById(data));
	     ev.preventDefault();}
	</script>
</head>
<body>
	<p>Дръпнете изображението и го поставете в правоъгълника</p>
	<div style="width:398px;height:177px;padding:10px;border:3px solid #183756;"
	    ondrop="drop(event)" ondragover="allowDrop(event)">
	</div>
	<br />
	<img id="drag1" src="http://dimarini.net/images/lessons/html5/html5.jpg" 
	  draggable="true" ondragstart="drag(event)" width="398" height="177" />
</body>

За да използвате този таг в материал на Joomla 2.5 се записва следния код:

	<script type="text/javascript">
	function allowDrop(ev)
	     {ev.preventDefault();}
	function drag(ev)
	     {ev.dataTransfer.setData("Text",ev.target.id);}
	function drop(ev)
	     {var data=ev.dataTransfer.getData("Text");
	     ev.target.appendChild(document.getElementById(data));
	     ev.preventDefault();}
	</script>
	<p>Дръпнете изображението и го поставете в правоъгълника</p>
	<div style="width:398px;height:177px;padding:10px;border:3px solid #183756;"
	     ondrop="drop(event)" ondragover="allowDrop(event)">
	</div>
	<br />
	<img id="drag1" src="http://dimarini.net/images/lessons/html5/html5.jpg" 
	  draggable="true" ondragstart="drag(event)" width="398" height="177" />

Резултата от изпълнението на горния код е следния:

Дръпнете изображението и го поставете в правоъгълника


Може би този код изглежда доста сложен, затова ще разгледаме отделните части на събитието drag and drop.

Подвижност но елемента

За да се направи елемента подвижен се задава стойност true на атрибута draggable:

	<img draggable="true" />

Какво да се изтегля - ondragstart and setData()

Сега трябва да се определи събитието при изтегляне на елемента. В горният пример атрибута ondragstart извиква функцията drag(ev), с която се определя какво да се изтегли. Метода dataTransfer.setData() определя вида на данните и техните стойности.

	function drag(ev)
	     {ev.dataTransfer.setData("Text",ev.target.id);}

В този случай, вида на данните е "Text", като стойността е id на изтегляния елемент ("drag1").

Къде да се изтегля - ondragover

Събитието ondragover определя къде да се постави изтегляния обект. По определение, елементите не могат да се поставят в други елементи. За да се разреши поставяне се извиква метода ev.preventDefault() за елемента ondragover:

	ev.preventDefault()

Осъществяване на поставянето - ondrop

Когато изтегляният елемент се поставя се осъществява събитието drop. В горният пример атрибутът ondrop вика функцията drop(ev):

	function drop(ev)
	     {var data=ev.dataTransfer.getData("Text");
	      ev.target.appendChild(document.getElementById(data));
	      ev.preventDefault();}

Двупосочно придвижване на изображението

В програмата по-долу е представено придвижване на изображение между два

елемента

<!DOCTYPE HTML>
<html>
<head>
	<script type="text/javascript">
	function allowDrop(ev)
	     {ev.preventDefault();}
	function drag(ev)
	     {ev.dataTransfer.setData("Text",ev.target.id);}
	function drop(ev)
	     {var data=ev.dataTransfer.getData("Text");
	      ev.target.appendChild(document.getElementById(data));
	      ev.preventDefault();}
	</script>
</head>
<body>
	<div style="float:left; width:199px; height:88px; margin:10px;padding:10px;border:2px solid #183756;"
	ondrop="drop(event)" ondragover="allowDrop(event)">
  		<img src="http://dimarini.net/images/lessons/html5/html5.jpg" 
		  draggable="true" ondragstart="drag(event)" id="drag1" width="199" height="88" />
	</div>
	<div  style="float:left; width:199px; height:88px; margin:10px;padding:10px;border:2px solid #183756;"
	ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
Виж примера в браузъра!