飞道科技

飞道科技文档总汇

拖拽改变列表次序的方法

设置对象可被拖动

被手动对象(比如列表中的某一项li),需要添加属性draggable="true",之后,该项即可被拖动,在浏览器上也能看到该对象随鼠标移动。

<ul>
	<li draggable="true">1</li>
	<li draggable="true">2</li>
	<li draggable="true">3</li>
	<li draggable="true">4</li>
	<li draggable="true">5</li>
</ul>

保存被拖动数据

被拖动对象需要添加事件ondragstart,以保存被拖动对象,经测试,整个节点对象不能被保存,只能保存字符串的数字。比如保存该对象的id。

<script>
function drag(ev)
{
	ev.dataTransfer.setData("text/plain", ev.target.id);
}
</script>
<li id="1" draggable="true" ondragstart="drag(event)">1</li>

设置可放置的位置

在可被放置对象的事件上添加事件ondragover,允许放开鼠标事件,只有在ondragover处理过,松开鼠标左键之后,被拖放位置节点上的ondrop事件才会被触发,对于列表的例子,可以将每个被拖动对象同时设置为可放置位置。如上例,列表项<li>2</li>可放置在列表项<li>1</li>里面,注意,最终结果并不是要放置在1里面,最终放置的位置还是由响应事件ondrop的脚本来控制的。

<li id="1" ondragover="return false">1</li>
<li id="2" draggable="true" ondragstart="drag(event)">2</li>

最终进行结点操作

最终拖放目标上响应事件ondrop,将被拖动对象插入到拖放目标的上面。

<script>
function drop(ev)
{
	ev.preventDefault();
	const ul = document.querySelector('ul') as HTMLUListElement;
	const id = ev.dataTransfer.getData("text/plain");
	ul.insertBefore(document.getElementById(id), ev.target);
}
</script>
<li id="1" ondrop="drop(event)" ondragover="return false">1</li>
<li id="2" draggable="true" ondragstart="drag(event)">2</li>