Блог

Главная - Вопросы по программированию - переместить элемент в положение курсора при щелчке в html-файле с помощью jquery

переместить элемент в положение курсора при щелчке в html-файле с помощью jquery

#jquery #html

#jquery #HTML

Вопрос:

я хочу переместить div в текущее положение курсора мыши при щелчке с помощью jquery

У меня есть функция, которая запускается всякий раз, когда событие щелчка мыши выполняется в любой части документа, которая работает.

Однако отправка позиции в мою функцию не работает:

Вот ссылка на jsfiddle 

 $(document).ready(function() {
  $(document).click(function(e) {
    var x = e.pageX;
    var y = e.pageY;
    var xpos = ( x   "px");
    var ypos = ( y   "px");
    move();
  });
  function move(){
    $("#move").animate({
      "top":  ypos, "left":  xpos
      //"top": "50px"   <-- but this works
    }, 1000);
  }
});

Комментарии:

1. Если вы имеете в виду перетаскивание, вы можете использовать API перетаскивания ( developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API ). Но поскольку это еще не поддерживается большинством браузеров, вы можете использовать события click , mouseover , mousedown mouseup , mousemove и, ,.

Ответ №1:

Похоже, вы не передаете параметры xpos и ypos своей функции перемещения. Попробуйте что-то вроде этого: 

     $(document).ready(function() {
      $(document).click(function(e) {
        var x = e.pageX;
        var y = e.pageY;
        var xpos = ( x   "px");
        var ypos = ( y   "px");
        move(xpos, ypos);
      });
      function move(x, y){       //pass in your parameters here
        $("#move").animate({
          "top": x, "left": y
          // "top": "50px"   //<-- but this works
        }, 1000);

      }
    });