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 的$('#id')。

要实际创建元素并将其附加到主体，请更改

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

进入

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

另外，在调整之后，当你调用鼠标指针的坐标时，它似乎在向南。 jQuery 的 mousemove 函数还会释放一些事件数据，然后您可以轻松地使用这些事件数据来获取所需的坐标，如下所示：

.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 作为示例，很难进一步帮助您，但我认为这绝对可以帮助您。