jQuery изменяет CSS внутри вызова вложенной функции

Question

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

JQuery (не работает)

//Drag begin     
var dragX;
var dragY;
var mouseDown = false;
var dragIcon = $('<span>')
.css({
    'z-index' : '11',
    'position' : 'absolute',
    'width' : '300px',
    'height' : '140px',
    'left' : '0px',
    'top' : '20px'
})

.addClass('unselectable')

.mousedown(function(){
    mouseDown = true;
    $(this).mousemove(function(){
        if(mouseDown == true){
            var dragX = getCurrentMouseX();
            var dragY = getCurrentMouseY();

            //Don't allow ideas to be created too close to the border of the page
            if(dragX < 260){
                dragX = 260;
            }else if(dragX > window.innerWidth - 260){
                dragX = window.innerWidth - 260;
            }    

            if(dragY < 160){
                dragY = 160;
            } else if(dragY > window.innerHeight - 450){
                dragY = window.innerHeight - 450;
            }

            $(this).css({
                'left' : dragX - 150,
                'top' : dragY - 81
            });
        }                
    })
})

.mouseout(function(){
    mouseDown = false;
})
.mouseup(function(){
     mouseDown = false;
});  

Я написал функцию на JavaScript, которая работает правильно, однако я пытаюсь преобразовать ее в jQuery. Ниже приведена рабочая функция JavaScript:

JavaScript (рабочий)

        //Drag begin     
    var dragX;
    var dragY;
    var mouseDown = false;

    //TODO: An icon which can be used to drag the cloud around
    var dragIcon = document.createElement('span');
    dragIcon.style.zIndex = "11";
    dragIcon.style.position = "absolute";
    dragIcon.style.width = "300px";
    dragIcon.style.height = "140px";   
    dragIcon.setAttribute('class', 'unselectable');
    dragIcon.style.left = "0px";
    dragIcon.style.top = "20px";
    dragIcon.unselectable = "on";
    dragIcon.style.MozUserSelect = "none";

    dragIcon.onselectstart = function() {return false;}
    dragIcon.onmousedown = function(){
        mouseDown = true;
        dragIcon.onmousemove = function(){
            if(mouseDown == true){
                var dragX = getCurrentMouseX();
                var dragY = getCurrentMouseY();

                if(dragX < 260){
                    dragX = 260;
                }else if(dragX > window.innerWidth - 260){
                    dragX = window.innerWidth - 260;
                }    

                if(dragY < 160){
                    dragY = 160;
                } else if(dragY > window.innerHeight - 450){
                    dragY = window.innerHeight - 450;
                }                           
                cloudStyle.left = dragX  - 150 + "px"; //-150 to make up for the position of the drag icon
                sunRay.style.left = dragX - 220 + "px";
                cloudStyle.top = dragY - 81 + "px"; //-85 to make up for the positioning
                sunRay.style.top = dragY - 250 + "px"; 
            }
        }
    }

    dragIcon.onmouseout = function(){
        mouseDown = false;
    }
    dragIcon.onmouseup = function(){
        mouseDown = false;
    }

Можете ли вы указать, где я иду не так, и принимаю ли я неправильный подход. Благодарю.

Answer 1

Хорошо, я обнаружил, что для замены существующего стиля мне нужно сделать следующее...

        item.removeAttr("style");            
        item.attr("style", "style goes here!");

Удаление атрибута стиля и повторное применение, кажется, работает хорошо.

Answer 2

Я думаю, что есть несколько причин, по которым он может не работать. Прежде всего, когда вы используете селектор jQuery, вам не нужно вставлять полный тег, как $('<span>') а скорее как $('span') выбрать конкретный элемент. Для классов его $('.class') и для удостоверений личности $('#id') ,

Чтобы создать элемент и добавить его в тело, измените

// Rest of code
var test = $('<span>').css({
// etc.

в

// Rest of code
var test = $('<span>').appendTo('body').css({
// etc.

Кроме того, после его настройки кажется, что он движется на юг, когда вы вызываете координаты указателя мыши. Функция mousemove в jQuery также выпускает некоторые данные события, которые затем можно легко использовать для получения необходимых координат, например:

.mousedown(function() {
    mouseDown = true;
    $(this).mousemove(function(e) {
        if (mouseDown == true) {
            var dragX = e.pageX;
            var dragY = e.pageY;

            // The rest of your original code

Трудно помочь вам в дальнейшем без HTML и CSS в качестве примера, но я думаю, что это определенно поможет вам в этом.