События элементов

MiXOH · 13.10.2009

Здравствуйте!

У меня есть элемент. При нажатии мыши он цепляется и при движении тянется за мышкой. Мне необходимо навести его на другой элемент и отпустить мышку (эмитация события drag&drop). Все бы хорошо, но вот при отпускании срабатывает событие onmouseup элемента который я перетягивал, а не того на который навел перетягиваемый элемент.

Как мне вызвать событие элемента на который я перетягиваю.

Для большей понятности привожу пример:
Есть кнопка А и кнопка Б. Нажимаю на кнопку А и перетягиваю ее на кнопку Б. Отпускаю мышку, срабатывает событи onmouseup кнопки А, а мне надо, чтобы срабатывало кнопки Б.

Может кто подскажет как такое можно сделать.

Заранее спасибо.

etc · 13.10.2009

Скорее всего надо фиксировать энтер и лив второго элемента.

MiXOH · 14.10.2009

Не совсем понял, что вы имеете ввиду.

Я поэкспериментировал с z-index, что-то получилось но все равно не совсем то, что надо.

Вот пример кода:

Код:

<html>
<head>
<script>
var startPositionX = null;
var startPositionY = null;

var intervalX = 0;
var intervalY = 0;

var globalElem = null;

function getElemShadow(elemId, prototypeId) {
elem = document.getElementById(elemId);
prototype = document.getElementById(prototypeId);

if (elem && prototype) {
globalElem = elem;

elem.style.visibility = "visible";

/*elem.style.borderColor = "black";
elem.style.borderWidth = "1px";
elem.style.borderStyle = "dashed";*/

startPositionY = elem.style.top;
startPositionX = elem.style.left;

document.body.attachEvent('onmouseup', setElemShadow);
document.body.attachEvent('onmousemove', moveElemShadow);

if (window.event.clientX || window.event.clientY) {
intervalX = window.event.clientX - elem.offsetLeft;
intervalY = window.event.clientY - elem.offsetTop;
}
}
}
function moveElemShadow() {
if (globalElem && (globalElem != null)) {
mX = document.getElementById("mouseX");
mY = document.getElementById("mouseY");
iX = document.getElementById("imageX");
iY = document.getElementById("imageY");

if (window.event.clientX || window.event.clientY) {
iX.value = elem.style.left;
iY.value = elem.style.top;

mX.value = window.event.clientX;
mY.value = window.event.clientY;

globalElem.style.left = window.event.clientX - intervalX;
globalElem.style.top = window.event.clientY - intervalY;
}
}
}
function setElemShadow() {
if (globalElem && (globalElem != null)) {
globalElem.style.top = startPositionY;
globalElem.style.left = startPositionX;
globalElem.style.visibility = "hidden";

globalElem = null;

document.body.attachEvent('onmouseup', null);
document.body.attachEvent('onmousemove', null);
}
}
function aaa(e) {
alert("Ура, работает!");
}
</script>
</head>
<body>
<table border="1" bordercolor="black" cellpadding="4" cellspacing="0">
<tr>
<td colspan="3" align="center">
Перемещение объектов.
</td>
</tr>
<tr>
<td>

</td>
<td>

</td>
<td>
<table onmousemove="moveElemShadow(this)" onmouseup="setElemShadow(this)" id="table1" style="visibility: hidden; z-index: 1; position: absolute; width: 100px; height: 30px; border-color: black; border-width: 1px; border-style: dashed;">
<tr>
<td>

</td>
</tr>
</table>
<input type="button" style="width: 100px; height: 30px; z-index: -2;" value="Фишка 1" id="fishka1" onmousedown="getElemShadow('table1', 'fishka1')">
</td>
</tr>
<tr>
<td>

</td>
<td>
<table onmousemove="moveElemShadow(this)" onmouseup="setElemShadow(this)" id="table2" style="visibility: hidden; z-index: -1; position: absolute; width: 100px; height: 30px; border-color: black; border-width: 1px; border-style: dashed;">
<tr>
<td>

</td>
</tr>
</table>
<input type="button" style="width: 100px; height: 30px; z-index: -2;" value="Фишка 2" id="fishka2" onmousedown="getElemShadow('table2', 'fishka2')">
</td>
<td onmouseup="aaa(this)" style="z-index: 0; height: 200px; width: 200px;">
Наведи элемент сюда и отпусти.
</td>
</tr>
<tr>
<td>
<table onmousemove="moveElemShadow(this)" onmouseup="setElemShadow(this)" id="table3" style="visibility: hidden; z-index: 0; position: absolute; width: 100px; height: 30px; border-color: black; border-width: 1px; border-style: dashed;">
<tr>
<td>

</td>
</tr>
</table>
<input type="button" style="width: 100px; height: 30px; z-index: -2;" value="Фишка 3" id="fishka3" onmousedown="getElemShadow('table3', 'fishka3')">
</td>
<td>

</td>
<td>

</td>
</tr>
</table>
<br>
Курсор мышки X 
<input type="text" name="mouseX" id="mouseX">
<br>
Курсор мышки Y 
<input type="text" name="mouseY" id="mouseY">
<br>
Координата картинки X 
<input type="text" name="imageX" id="imageX">
<br>
Координата картинки Y 
<input type="text" name="imageY" id="imageY">
</body>
</html>

Если перетаскивать Фишку 2, то все работает как надо, но сама фишка перетаскивается не очень, надо, чтобы она была поверх элементов, а при перетаскивании Фишки 1 и Фишки 3 не работает отпускание, зато перетаскивается как надо.

Помоги, пожалуйста, если кто знает, как добиться задуманного.

etc · 14.10.2009

Ниче не понятно, сначала одно не работало туперь другое. Надо по конкретнее определиться, что не работает.

MiXOH · 14.10.2009

Проблема сохранилась описанная в первоначальном сообщении, я нашел один из вариантов решения, но мне он не подходит

etc · 14.10.2009

Зачем тогда рассказывать про нерабочий? Что бы нас тут запутать?

MiXOH сказал(а):
Проблема сохранилась описанная в первоначальном сообщении

Ну говорю же при заходе мышкой на 2 элемент запоминаете его, при уходе - скидываете то что запомнили, а если делают дроп то у вас в том что сохранилось и есть то над чем дроп.

MiXOH · 26.10.2009

Были некоторые перебои в работе форума, и два последних сообщения не сохранились

Проблема до сих пор не решена.

При заходе на второй элемент мышкой событие не срабатывает.

Помогите, пожалуйста, решить проблему.

Все сервисы Codeby

Поиск

Поиск

События элементов

MiXOH

etc

MiXOH

etc

MiXOH

etc

MiXOH