【原创】可拖动修改顺序的html无序列表

开发 2008-2-9 1:47:00

在这里跟诸位分享一下自己的小小的“技术成果”^_^

这是本人原创的通过鼠标拖拽进行列表排序的ajax应用~
感兴趣的话，点击运行代码，然后在新窗口里面拖拖看喽~
仅仅是个Demo，内容和注释都是英文的，懒得写中文说明了，大家领会精神就好。

如果对大家有所帮助，本人倍感欣慰。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
}
ul {
  margin: 10px;
  padding-left: 0;
  border: 1px #ccc solid;
}
li {
  list-style: none;
  cursor: move;
  padding: 5px 10px;
  display: block;
}
.dragLayer {
  display: none;
  top: 0; left: 0;
  position: absolute;
  filter: alpha(Opacity = 80);
  opacity: 0.8;
}
.temp {
  background: #f0f0f0;
  color: #666;
}
#debug {
  padding: 5px 10px;
  display: block;
}
</style>
<script type="text/javascript" defer="defer">
/* variables */
var listData = ['item 1', 'item 2', 'item 3', 'item 4']; // demo data
var listDom; // record the draging status

/* basic functions */
function debug(str) { // show debug content
  el('debug').innerHTML = str;
}
function el(id) { // get element bt id
  return document.getElementById(id);
}

function evt2Position(evt) { // get the position from event for all kinds of browsers
  evt = evt || window.event;
  return {x: evt.clientX, y: evt.clientY};
}
function evt2Target(evt) { // get the target list item from event for all kinds of browsers
  evt = evt || window.event;
  var target = evt.target || evt.srcElement;

while (target) {
    if (target.tagName)
      if (target.tagName.toLowerCase() == 'li')
        return target;
    if (target == listDom.list)
      break;
    target = target.parentNode;
  }

return null;
}

/* initialization */
function init() { // build list and bind initDrag listener
  var dragLayer = document.createElement('ul');
  document.body.appendChild(dragLayer);
  var temp = document.createElement('li');
  dragLayer.appendChild(temp);
  dragLayer.className = 'dragLayer';
  temp.innerHTML = 'drag here?';
  temp.className = 'temp';
  temp.offset = -1;
  listDom = {
    list: el('list'),
    temp: temp,
    dragLayer: dragLayer
  };
  for (var i in listData)
    listDom.list.appendChild(buildItem(i, listData[i]));
  listDom.list.onmousedown = initDrag;
  debug('Data: ' + listData);
}
function buildItem(offset, data) { // build list item
  var item = document.createElement('li');
  item.innerHTML = data;
  item['offset'] = offset;
  return item;
}

/* draging functions */
function initDrag(evt) { // bind draging events
  var target = evt2Target(evt);
  if (!target)
    return;

listDom.list.insertBefore(listDom.temp, target);
  listDom.dragLayer.appendChild(target);
  listDom.list['tar'] = target;

listDom.list.onmousedown = null;
  document.body.onmouseup = stopDrag;
  document.body.onmousemove = startDrag;
}
function startDrag(evt) { // start drag the item and move it to other place
  var target = evt2Target(evt);
  if (!target)
    return;

changePosition(listDom.temp, target);
  getOrder();
  var position = evt2Position(evt);
  listDom.dragLayer.style['cssText'] = 'display: block; position: absolute; left: ' +
    (position.x - (-10)) + 'px; top: ' + (position.y - (-5)) + 'px';
}
function stopDrag() { // stop drag the item and end the draging status
  listDom.list.insertBefore(listDom.list['tar'], listDom.temp);
  listDom.list['tar'] = null;
  listDom.dragLayer.appendChild(listDom.temp);
  listDom.dragLayer.style['cssText'] = 'display: none; top: 0; left: 0';

listDom.list.onmousedown = initDrag;
  document.body.onmouseup = null;
  document.body.onmousemove = null;
}

/* other functions */
function changePosition (x, y) { // move item x beside item y
  if (x == y)
    return;
  var root = x.parentNode;
  if (root != y.parentNode)
    return;
  var list = root.childNodes;
  for (var i in list) {
    if (list[i] == x) {
      if (y.nextSibling)
        root.insertBefore(x, y.nextSibling);
      else
        root.appendChild(x);
      return;
    }
    if (list[i] == y) {
      root.insertBefore(x, y);
      return;
    }
  }
}
function getOrder() { // update and show the order of listData
  var list = listDom.list.childNodes;
  var result = [];
  for (var i in list) {
    if (!list[i])
      continue;
    if (isNaN(list[i].offset))
      continue;
    var offset = list[i].offset;
    if (offset == -1) {
      offset = listDom.list['tar'].offset;
      listDom.list['tar'].offset = result.length;
    }
    else
      list[i].offset = result.length;
    result.push(listData[offset]);
  }
  listData = result;
  debug('Data: ' + listData);
}
</script>
</head>
<body onload="init()">
List is here. You can drag the item for sorting.
<ul id="list"></ul>
<div id="debug"></div>
</body>
</html>

标签集:TAGS:拖拽排序列表 ajax

回复Comments() 点击Count()

回复Comments

{commentauthor}

{commenttime}

{commentnum}

{commentcontent}

作者:

{commentrecontent}