Jquery resizable添加不必要的填充按鈕可拖動/可調整大小

我已經創建了一個簡單的div並使用jquery Draggable和可調整大小的函數，我用四個手柄將方形邊框設爲藍色。Jquery resizable添加不必要的填充按鈕可拖動/可調整大小

現在，當我做按鈕相同，jquery以某種方式添加一個額外的div包裝到按鈕給予句柄，並添加了很多填充，我不想要，並且需要最終結果就像具有邊框的div像上面的一樣。

此外，該按鈕不可拖動。

你可以檢查codepen here，我創建並點擊這兩個按鈕來創建我上面解釋的例子。

<html> 
<head> 
    <title>Draggable, Moveable and Resizable DIV using jQuery</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/> 

    <style> 
     #divContainer, #divResize { 
      width:120px; 
      height:120px; 
      padding:5px; 
      margin:5px; 
      font:13px Arial; 
      cursor:move; 
      float:left; 
      background-color: aquamarine; 
     } 
    </style> 
<body> 
    <div> 

     <button id="btClickMeDragRes" type="button" class="btn btn-info">Create draggable/resizable DIV</button> 
     <button id="btClickMakeButton" type="button" class="btn btn-success">Create resizable button</button> 
     <div id="divContainer"> 
      Hello 
     </div> 
    </div> 
</body>

CSS

.ui-resizable { 
    border: 1px blue solid; 
} 

.ui-resizable-se, .ui-resizable-ne, .ui-resizable-sw, .ui-resizable-nw { 
    background: blue; 
    border: 1px solid blue;  
} 

.ui-resizable-se {  
    width: 9px !important; 
    height: 9px !important; 
    right: -5px !important; 
    bottom: -5px !important; 
}

var element_pos = 0; 

    var iCnt = 0; 
    $(document).ready(function() { 
     $(function() { $("#divResize").draggable().resizable(); }); 
     $('#btClickMeDrag').click(function() { 

      var dynamic_div = $(document.createElement('div')).css({ 
       border: '1px solid', position: 'absolute', left: element_pos, 
       top: $('#divContainer').height() + 20, 
       width: '20', height: '20', padding: '3', margin: '0', backgroundColor: 'beige' 
      }); 
      element_pos = element_pos + $('#divContainer').width() + 20; 
      $(dynamic_div).append('You can drag me too'); 
      $(dynamic_div).appendTo('#divContainer').draggable(); 
      myCount = myCount + 1; 
     }); 

     $('#btClickMeDragRes').click(function() { 

      var dynamic_div = $(document.createElement('div')).css({ 
       position: 'absolute', left: element_pos, 
       top: $('#divContainer').height() + 20, 
       width: '120', height: '120', padding: '3', margin: '0', backgroundColor: 'burlywood' 
      }); 

      element_pos = element_pos + $('#divContainer').width() + 20; 

      $(dynamic_div).append('You can drag and resize me'); 
      $(dynamic_div).appendTo('#divContainer').draggable().resizable({ 
       handles: "all" 
      }); 
      iCnt = iCnt + 1; 
     }); 

     $('#btClickMakeButton').click(function(){ 

      var dynamic_but = $(document.createElement('BUTTON')).css({ 
       position: 'absolute', left: element_pos, 
       top: $('#divContainer').height() + 20, 
       width: '120', height: '50', backgroundColor: 'burlywood' 
      }); 
      $(dynamic_but).text("KK button"); 
      $(dynamic_but).appendTo("body"); 
      $(dynamic_but).draggable().resizable({ 
       handles: "all" 
      }); 

     }); 
    });

來源

2017-10-10 Karun Kamal

我相信的是包裝的div是必需的，由腳本添加到控制內部的元件的大小調整功能。

.ui-wrapper{ 
    padding:0 !important; 
}

將此添加到您的CSS並擺脫填充。

來源

2017-10-10 10:01:56

考慮，我們可以在此改變個額外的CSS填充，仍然爲什麼按鈕是不可拖動， –

「ICNT沒有定義」解決這個問題，然後再試一次可能是這是阻止你的代碼放置超出這個 –

這裏是一個鏈接http://cr8code.co/editor.php?workid=392902984b20956ba2da9b9a593e268e我改爲將按鈕封裝到div中。並使其可拖動的可調整大小。 –

Jquery resizable添加不必要的填充按鈕可拖動/可調整大小

回答

相關問題