1. Набираем команду codeby webinar. Набираем команду для организации и проведения вебинаров. Подробнее ...

    Скрыть объявление
  2. Требуются разработчики и тестеры для проекта codebyOS. Требования для участия в проекте: Знание принципов работы ОС на базе Linux; Знание Bash; Крайне желательное знание CPP, Python, Lua; Навыки системного администрирования. Подробнее ...

    Скрыть объявление
  3. Получи 30.000 рублей. Для получения денег необходимо принять участие в конкурсе авторов codeby. С условиями и призами можно ознакомиться на этой странице ...

    Внимание! Регистрация авторов на конкурс закрыта.

    Скрыть объявление

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

Тема в разделе "Web - программирование", создана пользователем MiXOH, 13 окт 2009.

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

    MiXOH Гость

    Репутация:
    0
    Здравствуйте!

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

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

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

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

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

    etc Гость

    Репутация:
    0
    Скорее всего надо фиксировать энтер и лив второго элемента.
     
  3. MiXOH

    MiXOH Гость

    Репутация:
    0
    Не совсем понял, что вы имеете ввиду.

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

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

    etc Гость

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

    MiXOH Гость

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

    etc Гость

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

    MiXOH Гость

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

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

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

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

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