如何擴展元素寬度的兩種方式？

這個標題聽起來很混亂嗎？無論如何，我認爲這很可能。如何擴展元素寬度的兩種方式？

當我點擊頁面時，我希望他們能夠將我的一小段一行較短。

你可以明白我的意思是：

http://jsfiddle.net/shawn31313/HKLhE/9/show/

做一個MOUSEDOWN並將它們移到你向右移動。它工作正常。但現在，將鼠標移到左側。看到問題了嗎？它與您向右拖動時的方向相同。我知道這是因爲我使用寬度，顯然寬度是單向的。

這是我到目前爲止的代碼：

$(document).ready(function() { 
    var dragStatus = 0, 
     getPos, giveRandomID; 
    $(document).mousedown(function(event) { 
     dragStatus = 0; 
     getPos = { 
      top: event.clientY, 
      left: event.clientX 
     }; 
     giveRandomID = Math.floor(Math.random() * 99999); 
    }); 
    $(document).mousemove(function() { 
     var line = $('#line' + giveRandomID); 
     if (dragStatus == 0) { 
      $('body').append("<div id='line" + giveRandomID + "' class='line' style='position:absolute;top:" + getPos.top + "px;left:" + getPos.left + "px;background:black;width:2px;height:5px'></div>"); 
      dragStatus = 1; 
     } 
     if (dragStatus == 1) { 
      if (event.clientX > line.offset().left) { 
       line.css({ 
        width: event.clientX - line.offset().left 
       }); 
      } else { 
       line.css({ 
        width: line.offset().left - event.clientX 
       }); 
      } 
      //for DEG "-" Top-Math.abs(DEG*2) for Deg "+" Top+(DEG*2) 
     } 
    }); 
    $(document).mouseup(function() { 
     dragStatus = 2; 
    }); 
});

我希望有人能幫助我與此有關。也許有完全不同的方式來設置它。只是要解決這個問題

來源

2012-06-21 Shawn31313

爲了使線伸展到左邊，你必須更新left屬性：

 if (event.clientX > getPos.left) { 
      line.css({ 
       left: getPos.left, 
       width: event.clientX - getPos.left 
      }); 
     } else { 
      line.css({ 
       left: event.clientX, 
       width: getPos.left - event.clientX 
      }); 
     }

的jsfiddle：http://jsfiddle.net/HKLhE/16/

來源

2012-06-21 00:29:48 Brilliand

此外，您應該初始化'dragStatus'爲2，以避免在繪製第一行之前出現在控制檯中的JavaScript錯誤（實際上，您可能根本不需要'dragStatus' - 您只需檢查'getPos'並檢查不管該行是否存在），並且可能不需要通過這種方式創建行的「左側」（因爲它將在之後立即設置）。 – Brilliand

你需要修改else情況（向右移動）將left屬性設置爲auto和right屬性爲最初的鼠標單擊X位置。當向左移動時，與offset().left相比將不起作用，因爲該值正在改變。

嘗試了這一點尺寸爲：

http://jsfiddle.net/HKLhE/20/

編輯：Brilliand的解決方案是更優雅。

來源

2012-06-21 00:34:31 Cecchi

如何擴展元素寬度的兩種方式？

回答

相關問題