|
|
|
Supreme Being
участник
Last Login: 27.06.2008 14:10
Сообщ.: 275,
Visits: 865
|
|
Такой вопрос: Как можно сделать, чтобы, когда нажав на DIV и неотпуская мышь можно было бы тащитьь его, до тех пор пока не отпустишь мышь.
Я кое-что на примерах сделанного нарисовал, но есть не сколько ошибок:
- при первом наведении на DIV он начинает "тащиться" без нажатия на мышь, даль ше нормально - только при нажатом.
- при нажатии на DIV координаты DIV-а прыгают к координатам мыши, мне их никак не поставить на место.
Вот этот скрипт:
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;}
А вот DIV:
[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]
|
|
|
|
|
Supreme Being
участник
Last Login: 29.05.2008 20:04
Сообщ.: 269,
Visits: 2 381
|
|
var cur="";
var d=document
function down_action()
{ if (window.event.srcElement.tagName=="DIV")
{ cur=window.event.srcElement.id;
d.all[cur].style.left=window.event.clientX-50
d.all[cur].style.top=window.event.clientY-50
}
}
function up_action() { cur="";}
function move_action() {
if (cur!="")
{
d.all[cur].style.left=window.event.clientX-50
d.all[cur].style.top=window.event.clientY-50
}
event.canselBubble=true;
event.returnValue=false;
}
</script>
</HEAD>
<body onmousedown='down_action()' onmousemove='move_action()' onmouseup='up_action()'>
<div id=p1 style="position:absolute;top:100; left:100">текст1</div>
<div id=p2 style="position:absolute;top:100; left:250">текст2</div>
</body>
</HTML>//Точно работает в Opera 9 и IE, в FireFox 1.5 неработает
----------------------------------
Я безработный...
Возьмите меня на работу. =)
|
|
|
|
|
Junior Member
участник
Last Login: 09.10.2006 13:14
Сообщ.: 14,
Visits: 79
|
|
Хм... по-моему если этот скрипт и работает, то уж точно не так как надо.
Кстати cancelBubble написано не верно. Нужно через "С" писать.А вот работающий скрипт взятый из примеров одной книги по JS <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> //в опере и ие работает. в мозиле не проверял, но тоже должно работать
|
|
|
|
|
Supreme Being
участник
Last Login: 27.06.2008 14:10
Сообщ.: 275,
Visits: 865
|
|
Спасибо, Igorek!
Хороший пример :) мне надо только чуть-чуть доработать под мою задачу.
|
|
|
|