如何拖動和調整DIV元素的大小

Question

我想在HTML頁面中調整大小並拖動DIV元素。 我使用的代碼如下。 使用Javascript：

 <script type="text/javascript" src="dragresize.js"></script>
<script language="javascript" type="text/javascript"> 
var dragresize = new DragResize('dragresize',
 { minWidth: 50, minHeight: 50, minLeft: 20, minTop: 20, maxLeft: 600, maxTop: 600 });

// Optional settings/properties of the DragResize object are:
//  enabled: Toggle whether the object is active.
//  handles[]: An array of drag handles to use (see the .JS file).
//  minWidth, minHeight: Minimum size to which elements are resized (in pixels).
//  minLeft, maxLeft, minTop, maxTop: Bounding box (in pixels).

// Next, you must define two functions, isElement and isHandle. These are passed
// a given DOM element, and must "return true" if the element in question is a
// draggable element or draggable handle. Here, I'm checking for the CSS classname
// of the elements, but you have have any combination of conditions you like:

dragresize.isElement = function(elm)
{
 if (elm.className && elm.className.indexOf('drsElement') > -1) return true;
};
dragresize.isHandle = function(elm)
{
 if (elm.className && elm.className.indexOf('drsMoveHandle') > -1) return true;
};

// You can define optional functions that are called as elements are dragged/resized.
// Some are passed true if the source event was a resize, or false if it's a drag.
// The focus/blur events are called as handles are added/removed from an object,
// and the others are called as users drag, move and release the object's handles.
// You might use these to examine the properties of the DragResize object to sync
// other page elements, etc.

dragresize.ondragfocus = function() { };
dragresize.ondragstart = function(isResize) { };
dragresize.ondragmove = function(isResize) { };
dragresize.ondragend = function(isResize) { };
dragresize.ondragblur = function() { };

// Finally, you must apply() your DragResize object to a DOM node; all children of this
// node will then be made draggable. Here, I'm applying to the entire document.
dragresize.apply(document);
</script>

CSS

<style type="text/css">
.drsElement { 
position: relative;
 border: 1px solid #333;
}

.drsMoveHandle {
 height: 10px;
 border-bottom: 1px solid #666;
 cursor: move;
}

.dragresize {
 position: absolute;
 width: 5px;
 height: 5px;
 font-size: 1px;
 background: #EEE;
 border: 1px solid #333;
}


.dragresize-tl {
 top: -8px;
 left: -8px;
 cursor: nw-resize;
}
.dragresize-tm {
 top: -8px;
 left: 50%;
 margin-left: -4px;
 cursor: n-resize;
}
.dragresize-tr {
 top: -8px;
 right: -8px;
 cursor: ne-resize;
}

.dragresize-ml {
 top: 50%;
 margin-top: -4px;
 left: -8px;
 cursor: w-resize;
}
.dragresize-mr {
 top: 50%;
 margin-top: -4px;
 right: -8px;
 cursor: e-resize;
}

.dragresize-bl {
 bottom: -8px;
 left: -8px;
 cursor: sw-resize;
}
.dragresize-bm {
 bottom: -8px;
 left: 50%;
 margin-left: -4px;
 cursor: s-resize;
}
.dragresize-br {
 bottom: -8px;
 right: -8px;
 cursor: se-resize;
}
</style>

HTML

<table cellpadding="5" cellspacing="0" width="100%" style="margin:auto;">
            <tr>
                <td><div class="drsElement drsMoveHandle" id="output1" style="font-weight:bold;height:20px;margin-top:40px"></div></td>
            </tr>
            <tr>
                <td><div class="drsElement drsMoveHandle" id="output2" style="height:40px;margin-top:30px"></div></td>
            </tr>   
            <tr>
                <td><div class="drsElement drsMoveHandle" id="output3" style="height:50px;margin-top:40px;"></div></td>
            </tr>   
        </table>

問題是我無法將其拖動到任何我可以調整大小的地方，但無法將DIV元素大小從原始大小減小，我不知道為什么...... ?.

Answer 1

我看到你正在使用TwinHelix的代碼http://www.twinhelix.com/javascript/dragresize/

1）請通過始終明確說明您獲得所使用代碼的位置來表彰作者。 您應該告訴我們您正在使用TwinHelix提供的軟件包。 不要，故意或遺漏，讓人們認為你展示的代碼是你自己的代碼。 如果你到了某個地方，請告訴我們。

2）我已經使用該代碼來探索一些可能性，我沒有遇到任何問題。 我可以將div調整為任意大小，包括小於原始大小。

我建議你去TwinHelix網站獲取當前代碼，然后重新開始並確保你正確使用它。

您可以設置div的大小限制，限制可以上下移動的數量等。

確保你至少了解它正在做什么的基礎知識以及如何編寫div來做你想做的事情。

獲取TwinHelix的演示頁面，將其復制到您的系統，使用所有Javascript等，並使其在您的系統上運行。 然后使該頁面按照您想要的方式工作 - 分區大小，內容等 - 一旦您按照自己的方式工作，就可以將代碼集成到您自己的頁面中。 切勿從某處獲取代碼並直接跳入並將其放入頁面中。 隔離事物，在新的事物中創建一個單獨的測試頁面，在此示例中拖動並調整大小，然后將其集成到您的頁面中。

嘗試將其更改為按照您希望的方式工作，同時將其集成到您的頁面中將導致您遇到的問題多於您可以處理的問題。

在進行任何編程時，將其分解為易於處理的塊，讓它們以您想要的方式工作，然后將它們組合在一起以構成整體（我已經在“此”工作了39年以上並且只有一點經驗）。

閱讀示例代碼和其他代碼中的注釋，並至少了解定義分部的人員。

除非你確定自己在做什么，否則不要修改任何代碼或CSS，否則你可能會引入問題而不知道它們來自何處。

3）除了幾個問題，TwinHelix代碼運行良好。 我的問題是嘗試擴展功能並添加新功能。 我按照我想要的方式工作，但有一些我根本不喜歡的怪癖。 所以，我正在研究其他一些方法。 我不知道什么時候能完成它，但是當我這樣做時，我會在我的網站http://www.bobnovell.com上發布一個頁面 - 請注意現在沒有多少（截至2012年12月28日）但是，當我有時間時，我還有很多要補充的內容。

4）對於一個相當好的拖動功能，看看http://tool-man.org/ToolManDHTML/ - “基本可拖動圖層”它沒有調整大小但它運作良好。 唯一的問題與設置zIndex有關。 我添加了代碼來處理mouseDowns帶來的分歧

5）我不希望任何人看到你在這個問題中提供的所有代碼 - JavaScript，CSS，HTML - 並給你建議 - 它太大了。

另外，如果您有疑問，請聯系作者。