Релиб / Веб-программирование / JavaScript / Как тащить DIV / Latest Posts

RE: Как тащить DIV

Vodizzz — Tue, 15 Aug 2006 09:30:52 GMT

Спасибо, Igorek!
Хороший пример :) мне надо только чуть-чуть доработать под мою задачу.

RE: Как тащить DIV

Igorek — Mon, 14 Aug 2006 21:46:05 GMT

Хм... по-моему если этот скрипт и работает, то уж точно не так как надо.
Кстати cancelBubble написано не верно. Нужно через "С" писать.

А вот работающий скрипт взятый из примеров одной книги по JS

[code]<HTML>
<HEAD>
<TITLE>Layer Dragging</TITLE>
<STYLE TYPE="text/css">
.draggable {cursor:hand}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
var engaged = false
var offsetX = 0
var offsetY = 0
function dragIt(evt) {
evt = (evt) ? evt : (window.event) ? window.event : ""
var targElem = (evt.target) ? evt.target : evt.srcElement
if (engaged) {
if (targElem.className == "draggable") {
while (targElem.id != "myLayer" && targElem.parentNode) {
targElem = targElem.parentNode
}
if (evt.pageX) {
targElem.style.left = evt.pageX - offsetX + "px"
targElem.style.top = evt.pageY - offsetY + "px"
} else {
targElem.style.left = evt.clientX - offsetX + "px"
targElem.style.top = evt.clientY - offsetY + "px"
}
return false
}
}
}
function engage(evt) {
evt = (evt) ? evt : (window.event) ? window.event : ""
var targElem = (evt.target) ? evt.target : evt.srcElement
if (targElem.className == "draggable") {
while (targElem.id != "myLayer" && targElem.parentNode) {
targElem = targElem.parentNode
}
if (targElem.id == "myLayer") {
engaged = true
if (evt.pageX) {
offsetX = evt.pageX - targElem.offsetLeft
offsetY = evt.pageY - targElem.offsetTop
} else {
offsetX = evt.offsetX - document.body.scrollLeft
offsetY = evt.offsetY - document.body.scrollTop
if (navigator.userAgent.indexOf("Win") == -1) {
offsetX += document.body.scrollLeft
offsetY += document.body.scrollTop
}

}
return false
}
}
}
function release(evt) {
evt = (evt) ? evt : (window.event) ? window.event : ""
var targElem = (evt.target) ? evt.target : evt.srcElement
if (targElem.className == "draggable") {
while (targElem.id != "myLayer" && targElem.parentNode) {
targElem = targElem.parentNode
}
if (engaged && targElem.id == "myLayer") {
engaged = false
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Dragging a Layer</H1>
<HR>
<DIV ID="myLayer" CLASS="draggable" STYLE="position:absolute; top:90; left:100; width:300; height:190; background-color:lightgreen">
<SPAN CLASS="draggable"><B>Drag me around the window.</B></SPAN>
</LAYER>
<SCRIPT LANGUAGE="JavaScript">
document.onmousedown = engage
document.onmouseup = release
document.onmousemove = dragIt
document.onmouseout = release
</SCRIPT>
</BODY>
</HTML>[/code]

//в опере и ие работает. в мозиле не проверял, но тоже должно работать

RE: Как тащить DIV

Vizlim — Mon, 14 Aug 2006 14:46:05 GMT

//Точно работает в Opera 9 и IE, в FireFox 1.5 неработает

Как тащить DIV

Vodizzz — Mon, 14 Aug 2006 11:05:37 GMT

Такой вопрос: Как можно сделать, чтобы, когда нажав на DIV и неотпуская мышь можно было бы тащитьь его, до тех пор пока не отпустишь мышь.
Я кое-что на примерах сделанного нарисовал, но есть не сколько ошибок:
- при первом наведении на DIV он начинает "тащиться" без нажатия на мышь, даль ше нормально - только при нажатом.
- при нажатии на DIV координаты DIV-а прыгают к координатам мыши, мне их никак не поставить на место.
Вот этот скрипт:
[code]
var amount=4;
var dfg=0;

function iMouse()
{ ypos=event.y+document.body.scrollTop;
xpos=event.x+document.body.scrollLeft;
}

function xx()
{dfg=5;}

function yy()
{dfg=0;}

function flash(Q)
{
ypos=WindDiv.style.top;
xpos=WindDiv.style.left;
if (dfg==5)
{Q=5;
if (Q==5)
{
for (i=0; i {
eval('document.all["WindDiv"].style.top=ypos-10');
eval('document.all["WindDiv"].style.left=xpos-10;');
}
setTimeout("flash()",50);
}
}
}

if (document.onmousedown!="")
{document.onmousemove=iMouse;
xx();}
else
{document.onmouseup=yy;}
[/code]

А вот DIV:

[code]
[DIV id="WindDiv" style="position: absolute; top: 20px; left: 20px;"]
[div onMouseDown="xx()" onMouseMove="flash(0)" onMouseUp="yy()" id="ZagWin" style="position: absolute; top: 0px; left: 0px;"]
.........
[/div]
.....
[/DIV]
[/code]