JQuery的切換中，拖放和CONTENTEDITABLE

Question

http://codepen.io/mikethedj4/pen/gCsih
http://jsfiddle.net/ba5Ld/3/

我工作的一個基本的實驗性HTML設計師（你要做的就是畫的div /矩形和調整它們的大小沒有什麼花哨）

我使用ThreeDubMedia的拖動插件來完成拖動和調整大小事件。

我知道使用全局變量是不好的做法，但我不知道如何在沒有它們的情況下完成這種類型的效果。

無論如何，我遇到了兩個問題：第一是當選擇工具處於非活動狀態時（可移動設置爲false，我認爲它不應該拖動時），div仍然可拖動;當我選擇編輯工具時鼠標停在div上，它將contenteditable屬性設置爲true，但它不起作用。當我看看谷歌開發人員工具時，它顯示該屬性已添加且處於活動狀態，但不起作用。

任何幫助，非常感謝。

$('.start').click(function() { 
     moveable = 1; 
     drawable = false; 
     editable = false; 
     removeable = false; 
     $('.draw, .nodraw').removeClass('d-active e-active noselect active inactive r-active'); 
     $(this).addClass('active noselect s-active'); 
     if ($('.s-active').is(':visible')) { 
     if(moveable) { 
      $('#drawingArea *').addClass('moveable'); 

      $('.moveable').drag("start",function(ev, dd){ 
      dd.attr = $(ev.target).prop("className"); 
      dd.width = $(this).width(); 
      dd.height = $(this).height(); 
      }) 
      .drag(function(ev, dd){ 
      var props = {}; 
      if (dd.attr.indexOf("E") > -1){ 
       props.width = Math.max(32, dd.width + dd.deltaX); 
      } 
      if (dd.attr.indexOf("S") > -1){ 
       props.height = Math.max(32, dd.height + dd.deltaY); 
      } 
      if (dd.attr.indexOf("W") > -1){ 
       props.width = Math.max(32, dd.width - dd.deltaX); 
       props.left = dd.originalX + dd.width - props.width; 
      } 
      if (dd.attr.indexOf("N") > -1){ 
       props.height = Math.max(32, dd.height - dd.deltaY); 
       props.top = dd.originalY + dd.height - props.height; 
      } 
      if (dd.attr.indexOf("editable") > -1){ 
       props.top = dd.offsetY; 
       props.left = dd.offsetX; 
      } 
      $(this).css(props); 
      }, {relative:true}); 

      $('#drawingArea *').on('mousedown touchstart', function() { 
      if(moveable) { 
       $('#drawingArea *').removeClass('editable'); 
       $('.handle, .NN, .NE, .EE, .SE, .SS, .SW, .WW, .NW').remove(); 
       $(this).addClass('editable').append('<div class="handle NE"></div> <div class="handle NN"></div> <div class="handle NW"></div> <div class="handle WW"></div> <div class="handle EE"></div> <div class="handle SW"></div> <div class="handle SS"></div> <div class="handle SE"></div>'); 
       $('#drawingArea').on('mousemove touchmove', function(e) { 
       e.preventDefault(); 
       }); 
      } 
      }); 
     } 
     } else { 
     moveable = false; 
     $('.handle, .NN, .NE, .EE, .SE, .SS, .SW, .WW, .NW').remove(); 
     return false; 
     } 
    }); 

Answer 1

閉包被創建爲你這樣做：

var a = 1; 
(function(){ // Function call creates new scope every time. 
    var a = 2; 
    // JS look up current scope, then parent to search correct `a` variable 
    a = a + 1; 
    console.log(a) // -> 3. 
})(); 

console.log(a) //-> 1, use local scope 

再舉一個例子

var b = 1; 
(function(){  // Function call nests new scope 
    console.log(b) // -> 1. Use 'b' from parent scope 
    b++;   // -> 2. Increase `b` from parent scope 
    var b = 1;  // -> 1. Define b in local scope 
    console.log(b) // -> 1. This `b` from local scope 
})(); 

console.log(b)  // -> 2. Search in local scope only 

每個功能搜索本地範圍，然後父等等。現在你可以把你所有的HTMLNodes封閉起來。例如：

$('.start') // -> two or more nodes 
    .each(function(i, node){ 
     // Bind variables in function scope 
     var moveable, drawable, editable, removable; 
     $(node).click(function(){ 
      // If you click twice you will get 'undefined' and 1 respectively. 
      console.log(moveable); 
      moveable = 1; 
      // Do all other useful stuff 
     }); 

這是您的問題的唯一答案。但它不是最好的或事件許可的解決方案（你可以使用jQuery的data方法來保存每個節點的狀態）。讓我解釋。 String和Array是全局變量，所以全局變量並不壞。使用它們來保存狀態是不好的做法。