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的鼠標移動功能也釋放了一些EVENTDATA然後你就可以輕鬆地用它來得到你所需要的座標，就像這樣：

.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作爲一個例子，但我認爲這應該肯定會讓你走上正路。