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

  • Автор темы MiXOH
  • Дата начала
Статус
Закрыто для дальнейших ответов.
M

MiXOH

Гость
#1
Здравствуйте!

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

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

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

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

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

etc

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

MiXOH

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

Я поэкспериментировал с 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 не работает отпускание, зато перетаскивается как надо.

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

etc

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

MiXOH

Гость
#5
Проблема сохранилась описанная в первоначальном сообщении, я нашел один из вариантов решения, но мне он не подходит :)
 
E

etc

Гость
#6
Зачем тогда рассказывать про нерабочий? Что бы нас тут запутать?
Проблема сохранилась описанная в первоначальном сообщении
Ну говорю же при заходе мышкой на 2 элемент запоминаете его, при уходе - скидываете то что запомнили, а если делают дроп то у вас в том что сохранилось и есть то над чем дроп.
 
M

MiXOH

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

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

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

Помогите, пожалуйста, решить проблему.
 
Статус
Закрыто для дальнейших ответов.