3

我想在 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 元素大小，我不知道为什么......？

4

1 回答 1

9

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

1）请始终清楚地说明您在哪里获得所使用的代码，以此感谢作者。您应该告诉我们您正在使用 TwinHelix 提供的软件包。不要故意或疏忽，让人们认为你展示的代码是你自己的。如果你在某处得到它，请告诉我们。

2）我已经使用该代码来探索一些可能性，我对此没有任何问题。我可以将 div 调整为任何大小，包括小于原始大小。

我建议您访问 TwinHelix 站点并获取当前代码，然后重新开始并确保您正确使用它。

您可以设置 div 的大小限制、上下移动的限制等。

确保您至少了解它在做什么的基础知识以及如何编写 div 代码来完成您想做的事情。

获取 TwinHelix 的演示页面，将其复制到您的系统，以及所有的 Javascript 等，然后让它在您的系统上运行。然后让该页面按照您想要的方式工作 - 部门大小、内容等 - 一旦您的部门按照您想要的方式工作，将代码集成到您自己的页面中。永远不要从某个地方获取代码并直接跳入并将其放入您的页面中。隔离事物，仅使用新事物制作单独的测试页面，在此示例中拖动并调整大小，然后将其集成到您的页面中。

尝试将其更改为以您想要的方式工作，同时将其集成到您的页面中，这会给您带来更多无法处理的问题。

在进行任何编程时，将其分解为易于处理的块，让它们按照您想要的方式工作，然后将它们组合在一起以形成整体（我已经在“this”工作了 39 年以上，并且只有一点经验）。

阅读示例代码和其他代码中的注释，并至少了解谁来定义这些部门。

除非您确定自己在做什么，否则不要修改任何代码或 CSS，否则您可能会引入不知道它们来自何处的问题。

3) 除了几个问题，TwinHelix 代码运行良好。我的问题在于尝试扩展功能并添加新功能。我让事情按照我想要的方式工作，但有一些我根本不喜欢的怪癖。所以，我正在研究其他一些方法。我不知道什么时候可以完成，但是当我完成时，我会在我的网站http://www.bobnovell.com上发布一个页面——请注意，现在那里没有太多内容（截至 2012 年 12 月 28 日）但我有很多时间要补充。

4) 要获得相当好的拖动功能，请查看http://tool-man.org/ToolManDHTML/ -“基本可拖动图层”它没有调整大小但效果很好。唯一的问题与设置 zIndex 有关。我添加了代码来处理 mouseDowns 以带来分歧

5) 我不希望任何人查看您在这个问题中提供的所有代码 - JavaScript、CSS、HTML - 并给您建议 - 它太大了。

另外，如果您有任何问题，请咨询作者。

于 2012-12-28T06:41:14.347 回答