Недавно я увидел в Интернете, что некоторые друзья ищут реализации перетаскивания, похожие на персонализированную домашнюю страницу Google и пространство MSN, и случайно нашел пример ниже. Но было много проблем, я переписал и улучшил его и установил общий. function Вот конкретная реализация функции:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Демо-версия BlackSoul's Drag and Drop</title. >
<!- -
____________________________________
|--------Автор BlackSoul--------- |
------------2006.03.30------ ---- ----|
|[email protected] ------ |
------------QQ:9136194---- ---- ------
|------http://blacksoul.cnblogs.cn---|
================= ==== ==============
-->
<style type="text/css">
body
{
margin:0px
}
;
#aim /*Установите стиль целевого слоя*/
{
position:absolute;/*Стиль,
необходимый для управления положением слоя*/
width:200px
height:30px;
border:1px Solid #666666;
;
}
#sourceLayer, #cloneLayer
{
position:absolute;/*Стиль,
необходимый для управления положением слоя*/
width
:300px;
height
:50px;
border:1px Solid #666666;
.docked
{
display: none;
фильтр: альфа (opacity = 100)
;
.actived
{
display:block;
filter:alpha(opacity=70 }
</style>
</head>
)
;
<тело>
<div id="aim">Диапазон размещения</div>
<div id="sourceLayer" unselectable="off"><img src="
<div id="cloneLayer" class="docked" unselectable="off"> </div>
<script type="text/javascript" Language="javascript">
<!--
/*
============================ =======
|--------Автор BlackSoul--------- |
------------2006.03.30----- ---------|[email protected]
|------------QQ:9136194--- -----------
|------http://blacksoul.cnblogs.cn---|
================ =================
*/
//Установим объект слоя
var aim;
var sourceLayer;
var cloneLayer;
//
Определить
начальное положение каждого слоя
var aimX;
var
orgnX;
//Переменные во время перетаскивания
var draging = false; //Перетаскивается ли объект
var offsetX = 0 //Смещение влево и вправо в направлении X
var offsetY = 0 //Смещение вверх и вниз в направлении Y
var
;back; //Вернем объект анимации
var thisX; //Позиция X текущего слоя клона
var thisY; //Позиция Y текущего слоя
var time;
//Скорость перемещения
var StepY;
//Инициализируем информацию о перетаскивании
/*
координата x initAimX target
initAimY координата y
initOrgnX источник перетаскивания x координата
initOrgnY координата y источника перетаскивания
*/
//Получаем объект слоя
функция getLayer(inAim,inSource,inClone)
{
цель = document.getElementById(inAim);
sourceLayer = document.getElementById(inSource);
cloneLayer
= document.getElementById(inClone);
function initDrag(initAimX,initAimY,initOrgnX,initOrgnY)
{
aimX = initAimX;
aimY
= initAimY; orgnX = initOrgnX;
orgnY = initOrgnY;
//Устанавливаем положение каждого начального слоя
target.style.pixelLeft =
aimX.style.pixelTop
;= aimY;
sourceLayer.style.pixelLeft = orgnX;
sourceLayer.style.pixelTop = orgnY;
cloneLayer.style.pixelLeft
= orgnX;
cloneLayer.style.pixelTop = orgnY;
//Подготовка функции перетаскивания
BeforeDrag()
{
if (event.button != 1)
{
return
}
cloneLayer.innerHTML = sourceLayer.innerHTML; //Копируем исходное содержимое перетаскивания
offsetX = document.body.scrollLeft + event.clientX - sourceLayer.style.pixelLeft;
offsetY = document.body.scrollTop + event.clientY - sourceLayer.style.pixelTop;
cloneLayer.className = "actived
"
;
//
Функция
перетаскивания
OnDrag(){
if(!draging)
{
return;
}
// Обновляем позицию
event.returnValue = false;
cloneLayer.style.pixelLeft = document.body.scrollLeft + event.clientX - offsetX
; = document.body.scrollTop + event.clientY - offsetY
}
;
//Конец
функции перетаскивания EndDrag()
{
if (event.button != 1)
{
return
}
draging = false;
if (event.clientX >= aim.style.pixelLeft && event.clientX <= (aim.style.pixelLeft + aim.offsetWidth) &&
event.clientY >= target.style.pixelTop && event.clientY <= (aim.style .pixelTop + aim.offsetHeight))
{
//Перетаскиваемый слой располагается в целевом месте и автоматически позиционируется в целевое положение
sourceLayer.style.pixelLeft = aim.style.pixelLeft;
sourceLayer.style.pixelTop = aim.style.pixelTop;
cloneLayer.className = "docked";
/*
** После этого вы можете использовать xml для сохранения текущей позиции
** В следующий раз, когда пользователь введет
, исходный слой перетаскивания будет инициализирован данными в xml
*/
}
else
{
//Перетаскивание Находясь за пределами целевого слоя, восстанавливаем исходную позицию перетаскивания
thisX=
cloneLayer.style.pixelLeft;
thisY = cloneLayer.style.pixelTop;
offSetX = Math.abs(thisX - orgnX);
(thisY - orgnY);
time = 500;//Установим время анимации
StepX = Math.floor((offSetX/time)*20);
StepY
= Math.floor((offSetY/time)*20);
0)
шагX = 2,
если (шагY == 0)
шагY = 2;
//Запускаем анимацию возврата
moveStart();
}
};
function moveStart()
{
back = setInterval("MoveLayer();",15 })
;
//Устанавливаем возвращаемый эффект анимации
function MoveLayer()
{
//Находится в верхней левой части цели
if(cloneLayer.style.pixelLeft <= orgnX && cloneLayer.style.pixelTop <= orgnY)
{
cloneLayer.style.pixelLeft + = stepX;
cloneLayer.style .pixelTop += StepY;
// Если смещение превышает целевое, установите скорость в пиксель и двигайтесь назад в противоположном направлении. Здесь достигается тот же эффект, что и
if(cloneLayer.style. PixelLeft > orgnX)
{
stepX = 1;
}
if(cloneLayer.style.pixelTop > orgnY)
{
stepY = 1;
}
//Если координаты по оси X или Y одинаковы, смещения не произойдет
if(cloneLayer.style .pixelLeft == orgnX)
{
stepX = 0;
}
if(cloneLayer .style.pixelTop == orgnY)
{
stepY = 0;
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
{
КонецДвижения();
}
}
//Находится в левом нижнем углу цели
else if(cloneLayer.style.pixelLeft <= orgnX && cloneLayer.style.pixelTop >= orgnY)
{
cloneLayer.style.pixelLeft += StepX;
cloneLayer.style.pixelTop -= StepY;
if(cloneLayer.style.pixelLeft > orgnX)
{
stepX = 1;
}
if(cloneLayer.style.pixelTop < orgnY)
{
stepY = 1;
}
if(cloneLayer.style.pixelLeft == orgnX)
{
stepX = 0
}
; (cloneLayer.style. PixelTop == orgnY)
{
stepY = 0;
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
{
EndMove()
} }
;
//Располагается в верхней правой части цели
else if(cloneLayer.style.pixelLeft >= orgnX && cloneLayer.style.pixelTop <= orgnY)
{
cloneLayer.style.pixelLeft -= stepX;
cloneLayer.style.pixelTop += StepY ;
if(cloneLayer.style .pixelLeft < orgnX)
{
stepX = 1;
}
if(cloneLayer.style.pixelTop > orgnY)
{
stepY = 1;
}
if(cloneLayer.style.pixelLeft == orgnX)
{
stepX = 0
}
;if(cloneLayer.style.pixelTop == orgnY)
{
stepY = 0;
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
{
EndMove()
} }
;
//Располагается в верхней правой части цели
else if(cloneLayer.style.pixelLeft >= orgnX && cloneLayer.style.pixelTop >= orgnY)
{
cloneLayer.style.pixelLeft -= StepX;
cloneLayer.style.pixelTop -= StepY ;
if(cloneLayer.style .pixelLeft < orgnX)
{
stepX = 1;
}
if(cloneLayer.style.pixelTop < orgnY)
{
stepY = 1;
}
if(cloneLayer.style.pixelLeft == orgnX)
{
stepX = 0
}
;if(cloneLayer.style.pixelTop == orgnY)
{
stepY = 0;
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
{
EndMove()
} }
;
//достигаем цели
else
{
EndMove()
}
};
//Остановка возврата анимации
функция EndMove()
{
sourceLayer.style.pixelLeft = orgnX;
sourceLayer.style.pixelTop = orgnY;
cloneLayer.style.pixelLeft = orgnX;
cloneLayer.style.pixelTop = orgnY;
cloneLayer.className = "docked";
очиститьИнтервал (назад })
;
//Основная функция перетаскивания
startDraging(inAim,inSource,inClone,initAimX,
initAimY,initOrgnX,initOrgnY)
{
getLayer(inAim,inSource,inClone)
initDrag(initAimX,initAimY,initOrgnX,initOrgnY);
sourceLayer.onmousedown = BeforeDrag;
onmousemove = OnDrag; // Если здесь используется cloneLayer, содержимое cloneLayer будет выбрано во время перетаскивания, и появятся некоторые ошибки...
cloneLayer.onmouseup = EndDrag
}
;
//Вызов
startDraging("aim","sourceLayer","cloneLayer",300,200,20,20
//-->
</script>
</body>
</html>
Следует отметить, что:
1. В HTML должно быть три определения div. Положение стиля должно быть определено как абсолютное во всех трех слоях, чтобы контролировать положение.
1. Целевой слой (цель), его основная функция — определить положение, в котором перетаскивание вступает в силу.
2. Перетащите источник (sourceLayer) Обратите внимание на установку атрибута unselectable="off" (это странно, установка его в диапазон on приведет к выбору содержимого слоя в процессе перетаскивания).
3. Слой, используемый для копирования (cloneLayer).
2. Вызов функции
Объяснение параметра startDraging:
Имя целевого слоя initAim initSource имя источника перетаскивания initClone имя слоя, используемого для копирования
initAimX Координата целевого слоя по оси X initAimY Координата целевого слоя по оси Y initOrgnX Координата X источника перетаскивания initOrgnY Координата источника перетаскивания по оси Y
проверяется только в IE. Комментарии добавлены. Вы можете добавить операцию записи XML после того, как источник перетаскивания достигнет цели. А затем записать данные пользовательского макета страницы. Я не очень доволен алгоритмом возврата анимации. некоторые предложения по улучшению. В настоящее время я работаю над разработкой набора элементов управления ajax на основе asp.net2.0. Надеюсь, у вас будет больше сообщений.
PS: Первая статья в моем блоге. Надеюсь, вы меня очень поддержите. .