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

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем MiXOH, 13 окт 2009.

Статус темы:
Закрыта.
  1. MiXOH

    MiXOH Гость

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

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

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

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

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

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

    etc Гость

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

    MiXOH Гость

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

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

    Вот пример кода:
    Код (Text):
    <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 не работает отпускание, зато перетаскивается как надо.

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

    etc Гость

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

    MiXOH Гость

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

    etc Гость

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

    MiXOH Гость

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

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

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

    Помогите, пожалуйста, решить проблему.
     
Загрузка...
Статус темы:
Закрыта.

Поделиться этой страницей