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 (Working)

        //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 ') 选择特定元素。对于类是 $('.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 作为示例，很难为您提供进一步的帮助，但我认为这绝对可以帮助您上路。