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; 
}); 

私は、しかし、私はjQueryのに変換しようとしている、正しく動作するJavaScript関数を書きました。以下は、作業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

私は次の操作を行う必要があり、既存のスタイルを交換することがわかってきました[OK]を...

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

スタイル属性を削除し、再適用するには、うまく動作するようです。

Answer 2

私はそれがうまくいかない原因がいくつか考えられます。まず第一に、jQueryセレクタを使用すると、 $('<span>')のような完全なタグを入れる必要はなく、 $('span')のように特定の要素を選択する必要があります。クラスは $('.class')、IDは $('#id')です。

実際の要素を作成し、体にそれを追加し、

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

に

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

を変更するには、あなたが時に呼び出している場合にも、その調整した後、それが南下しているようですマウスポインタの座標jQueryのMouseMoveの機能はまた、あなたが、簡単にそうように、あなたが必要とする座標を取得するために使用できるいくつかの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せずにさらにあなたを助けるのは難しいですが、私はこれはすべきだと思います間違いなくあなたを邪魔しないでください。