Реализация перетаскивания относительно позиционированных элементов в JavaScript - PullRequest
Новая
       0

Реализация перетаскивания относительно позиционированных элементов в JavaScript

3 голосов
/ 25 февраля 2011

Я прошу прощения за то, что опубликовал так много вопросов - я все еще учусьТаким образом, я могу перетащить первый элемент в HTML без проблем;однако, когда я пытаюсь перетащить второй, он появляется немного ниже мыши.Это все еще тянет, куда бы я ни двигал мышь, но далеко внизу.Что не так?

Вот JavaScript: 

// JavaScript Document

var posX;
var posY;
var element;

document.addEventListener("mousedown", drag, false);

function drag(event) {
    if(event.target.className == "square") {
        element = event.target;
        posX = event.clientX -parseInt(element.offsetLeft);
        posY = event.clientY -parseInt(element.offsetTop);
        document.addEventListener("mousemove", move, false);
    }
}

function move(event) {

    if (typeof(element.mouseup) == "undefined")
        document.addEventListener("mouseup", drop, false);
    //Prevents redundantly adding the same event handler repeatedly

    element.style.left = event.clientX - posX + "px";
    element.style.top = event.clientY - posY + "px";
}    

function drop() {
    document.removeEventListener("mousemove", move, false);
    document.removeEventListener("mouseup", drop, false);
    //alert("DEBUG_DROP");
}

Вот HTML: 

<body>

<p class="square">Thing One</p>
<p class="square">Thing Two</p>

</body>

Вот CSS: 

/* CSS Document */

.square {
    position: relative;
    width: 100px;
    height: 100px;
    background: red;
}

p {
    padding: 0px;
    margin: 0px;
}

Спасибо всем за ваше время!Я очень ценю это!

Ответы [ 2 ]

2 голосов
/ 25 февраля 2011

Здесь необходимо рассмотреть две отдельные проблемы:

  1. Как узнать положение элемента на странице?
  2. Что происходит, когда я присваиваю новые значения left и top свойства стиля?

Ответ на первый вопрос основан на понимании element.offsetLeft и element.offsetTop.Эти свойства дают смещение относительно element.offsetParent, которое определено как «ближайший (самый близкий в иерархии содержимого) позиционированный содержащий элемент».

В вашем документе это <body>элемент, поэтому он работает, как вы ожидали.Если бы вы поместили свои квадраты внутри других элементов, вы бы обнаружили, что ваш код перестал работать.То, что вам нужно, это функция, чтобы пройтись по дереву, содержащему элементы, и суммировать каждое из смещений, вот так : 

function findPos(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
    }
}

Используется так: 

var pos= findPos(element);
posX = event.clientX - pos.x;
posY = event.clientY - pos.y;

Ответ на второй вопрос требует понимания относительно позиционированных элементов.Элементы, которые расположены относительно, отображаются в позиции относительно относительно того места, где они обычно отображаются на странице.Когда вы присваиваете значения top и left, вы не даете абсолютные значения.Вы даете позиции, которые обрабатываются относительно первоначальной позиции элемента в макете.Это особенность относительного позиционирования, а не ошибка.Вы, вероятно, хотите использовать position: absolute; вместо.

1 голос
/ 25 февраля 2011

если вы используете относительное позиционирование где-то, то смещение элемента может быть не относительно верхнего левого угла документа.

вам нужно найти абсолютное смещение элемента.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...