JS Drag and Drop к цели, не зная ее позиции - PullRequest
Новая
       21

JS Drag and Drop к цели, не зная ее позиции

0 голосов
/ 22 апреля 2011

Я создаю простое приложение, которое позволяет перетаскивать несколько изображений на целевой div на странице. Когда перетащите img и отпустите на целевом div, свойства img будут отмечены.

К сожалению, моя веб-страница построена на процентах, и мне интересно, есть ли какой-либо способ сделать это, не зная верхних, левых и т. Д. Позиций целевой области. Другими словами, без работы с абсолютами.

У меня перетаскивающая часть работает нормально, она просто имитирует обнаружение, которое я нахожу хитрым.

Я думаю, что довольно близко подошел к событию mouseover на целевом div, но, конечно, перетаскивание img блокирует запуск события. Когда я отпускаю свое изображение, оно сбрасывается в его нормальное положение и дает короткое время, чтобы наведение мыши показалось подходящим.

Однако в тестах может показаться, что этот промежуток времени не дает наведению мыши достаточно времени для запуска (если это вообще возможно). Я полагаю, что это так, потому что я поставил предупреждение сразу после того, как перетаскиваемое изображение перестает блокировать целевой div, и свойства img были успешно напечатаны в моем журнале консоли. 

img.style.position = "relative";
img.style.left = "0px";
img.style.top = "0px";

var startDrag = function(e){
    initialMouseX = e.clientX;
    initialMouseY = e.clientY;
    initialElementX = initialElementY = "0px";
    img.style.zIndex = 1000;
    document.addEventListener("mouseup", removeDrag, true);
    document.addEventListener("mousemove",movement,true);
    document.getElementById("drag-area").addEventListener("mouseover",
    readPeriod,true); //mouseover event starts when the user presses the img
};

var removeDrag = function(e){
    document.removeEventListener("mousemove",movement,true);
    img.style.left="0px";
    img.style.top="0px";
    img.style.zIndex = 0;
    //an alert at this point gives the mouseup time to fire
    img.removeEventListener("mouseup", removeDrag, true);
        //mouseover ends after the img has stopped blocking the mouse
    };

var movement = function(e){
    /*Code which moves the dragging img by style.left/top*/
};

var readPeriod = function(e){
    console.log(img.name); //Point of simulated on target div
};

img.addEventListener("mousedown",startDrag,true);

Итак, в общем, я пытаюсь смоделировать падение изображения на цель, так как невозможно определить целевой div по его расположению на экране.
(К сожалению, я не могу использовать библиотеку js, чтобы помочь мне в этой ситуации.)

1 Ответ

1 голос
/ 22 апреля 2011

Вам, вероятно, следует использовать jQuery UI's Droppable .Все было бы намного проще, и вам не нужно будет решать такие проблемы, как эта.
Люди потратили много часов на правильную работу.Вы не должны снова тратить свое время и снова исправлять все эти ошибки.
Кроме того, вы сможете пометить цель сбрасывания по идентификатору и не будете иметь дело с координатами

...