会拖动的list-JS
日期：2014-05-16 浏览次数：20520 次
以下只作为自己的笔迹记录
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
? ? ? ? "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
? ? <title></title>
? ? <style type="text/css">
? ? ? ? *{ margin: 0; padding: 0; ?-moz-user-select:none;}
? ? ? ? ul{ margin: 100px; border: 1px solid #adff2f; list-style: none;}
? ? ? ? li{ height: 30px; line-height: 30px; padding: 0; list-style: none;}
? ? ? ? li:hover{ background: #bdb76b; cursor: move;}
? ? </style>
</head>
<body>
<ul id="outer_wrap">
? ? <li>test1</li>
? ? <li>test2</li>
<li>test3</li>
<li>test4</li>
<li>test5</li>
<li>test6</li>
<li>test6</li>
<li>test7</li>
<li>test8</li>
<li>test9</li>
<li>test11</li>
<li>test12</li>
<li>test14</li>
<li>test13</li>
<li>test15</li>
</ul>
<script type="text/javascript">
? ? function $(id){
? ? ? ? return document.getElementById(id);
? ? }
?
function getMousePos(e){
? ? ? ? return {
? ? ? ? ? ? x : e.pageX || e.clientX + document.body.scrollLeft,
? ? ? ? ? ? y : e.pageY || e.clientY + document.body.scrollTop
? ? ? ? }
? ? }
?
function getElementPos(el){
? ? ? ? return {
? ? ? ? ? ? x : el.offsetParent ? el.offsetLeft + arguments.callee(el.offsetParent)['x'] : el.offsetLeft,
? ? ? ? ? ? y : el.offsetParent ? el.offsetTop + arguments.callee(el.offsetParent)['y'] : el.offsetTop
? ? ? ? }
? ? }
?
function getElementSize(el){
? ? ? ? return {
? ? ? ? ? ? width : el.offsetWidth,
? ? ? ? ? ? height : el.offsetHeight
? ? ? ? }
? ? }
?
? ? document.onselectstart = function(){
? ? ? ? return false;
? ? }
?
var MOVE = {};
? ? MOVE.isMove = false;
?
?
var div = document.createElement('div');
? ? div.style.width ?= '400px';
? ? div.style.height = '1px';
? ? div.style.fontSize = '0';
? ? div.style.background = 'red';
?
? ? var outer_wrap = $('outer_wrap');
? ? outer_wrap.onmousedown = function(event){
?
var lis = outer_wrap.getElementsByTagName('li');
? ? ? ? for(var i = 0; i < lis.length; i++){
? ? ? ? ? ? lis[i]['pos'] ?= getElementPos(lis[i]);
? ? ? ? ? ? lis[i]['size'] = getElementSize(lis[i]);
? ? ? ? }
? ? ? ? event = event || window.event;
? ? ? ? var t = event.target || event.srcElement;
? ? ? ? if(t.tagName.toLowerCase() == 'li'){
? ? ? ? ? ? var p = getMousePos(event);
? ? ? ? ? ? var el = t.cloneNode(true);
? ? ? ? ? ? el.style.position = 'absolute';
? ? ? ? ? ? el.style.left = t.pos.x + 'px';
? ? ? ? ? ? el.style.top ?= t.pos.y + 'px';
? ? ? ? ? ? el.style.width ? = t.size.width + 'px';
? ? ? ? ? ? el.style
