Question

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

我正在研究一个基本的实验性html设计师（你所做的就是绘制div /矩形并调整它们没什么可幻想的）

我正在使用ThreeDubMedia的拖动插件来完成拖动和调整事件的大小。

我知道使用全局变量是不好的做法，但我无法弄清楚如何在没有它们的情况下完成这种效果。

无论如何我遇到了两个问题：首先是当选择工具处于非活动状态时div仍然可以拖动（可移动设置为false，我认为它不应该拖动），当我选择鼠标时编辑工具在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是全局变量，因此全局变量也不错。使用它们来保存状态是不好的做法。

JQuery Toggle Drag，Drop＆amp; CONTENTEDITABLE

1 个答案: