1. Спонсор публикаций Marketplace codeby. Сервис, который так долго ждали. При расчетах используем биткоин. Первый товар уже в продаже: Консультация на тему ИБ от Ondrik8

    Скрыть объявление
  2. Спонсор публикаций Marketplace codeby. Сервис, который так долго ждали. При расчетах используем биткоин. Второй товар маркетплейса: Надёжная обфускация вашей программы от PingVinich

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

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

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

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

    MiXOH Гость

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

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

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

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

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

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

    etc Гость

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

    MiXOH Гость

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

    Я поэкспериментировал с 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 Гость

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

    MiXOH Гость

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

    etc Гость

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

    MiXOH Гость

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

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

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

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

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