javascript 如何拖动和调整 DIV 元素的大小

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11288739/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 12:38:58  来源:igfitidea点击:

how to drag and resize DIV element

javascripthtmlcss

提问by Leroy Mikenzi

I want to resize and drag DIV element in a HTML page. The code I used is as follows. Javascript:

我想在 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

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

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>

The issue is that I can't dragit any where I can resize but can't reduce the DIV element size from the original size, I don't know why..?.

问题是我不能拖到任何可以调整大小但不能从原始大小减少 DIV 元素大小的地方,我不知道为什么......?

回答by user1933826

I see you are using the code from TwinHelix http://www.twinhelix.com/javascript/dragresize/

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

1) Please give credit to the author by always stating, clearly, where you got the code you are using. You should have told us that you are using the package available from TwinHelix. Don't, deliberately or by omission, let people think that code you show is your own. If you got it somewhere, tell us.

1)请始终清楚地说明您从何处获得正在使用的代码,以此来赞扬作者。您应该告诉我们您正在使用 TwinHelix 提供的软件包。不要有意或无意地让人们认为您展示的代码是您自己的。如果您在某处找到它,请告诉我们。

2) I've used that code to explore some possibilities and I had no problem with it. I could resize divs to any size, including to smaller than the original size.

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

I recommend you go to the TwinHelix site and get the current code and then start over and make sure you are using it correctly.

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

You can set limits on how large or small a div can be made, limits on how much it can be moved up and down, etc.

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

Make sure you understand at least the basics of what it is doing and how to code the divs to do what you want done.

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

Take TwinHelix's demo page, copy it to your system, with all the Javascript, etc. and get it to work on your system. Then make that page work the way you want - divisions sizes, content, etc. - and once you have divisions working the way you want, integrate the code into your own pages. Never take code from somewhere and jump right in and put it in your pages. Isolate things, make a separate test page with only the new thing, drag and resize in this example, and then integrate it into your pages.

获取 TwinHelix 的演示页面,将其连同所有 Javascript 等复制到您的系统中,然后让它在您的系统上运行。然后让该页面按照您想要的方式工作 - 分区大小、内容等 - 一旦您让分区按照您想要的方式工作,将代码集成到您自己的页面中。永远不要从某个地方拿走代码,然后直接跳进去把它放到你的页面中。隔离事物,单独制作一个只有新事物的测试页面,在本例中拖动并调整大小,然后将其集成到您的页面中。

Trying to change it to work the way you want at the same time you are integrating it into your pages will cause you more problems than you can handle.

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

When doing any programming, break it down into easily handled chunks, get them working the way you want, and then put them together to make the whole (I've been at "this" for 39+ years and have just a bit of experience).

在进行任何编程时,将其分解为易于处理的块,让它们以您想要的方式工作,然后将它们组合在一起构成整体(我已经在“这个”工作了 39 多年,只有一点经验)。

Read the comments in the sample code and the other code and understand at least who to define the divisions.

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

Unless you are sure of what you are doing, don't modify any of the code or CSS or you may introduce problems with no idea of where they came from.

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

3) Except for a couple of issues, the TwinHelix code works well. My problem was in trying to stretch the capabilities and adding new ones. I got things working the way I want but there are a few quirks I simply don't like. So, I'm looking at some other methods of doing it. I don't know when I'll have it done, but when I do I'll post a page on my web site at http://www.bobnovell.com--- be aware that there is not much there right now (as of December 28, 2012) but I have a lot to add when I have time.

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

4) For a reasonably good drag function, take a look at http://tool-man.org/ToolManDHTML/- the "Basic Dragable Layers" It does not have resizing but it works well. The only problem has to do with setting the zIndex. I've added code to handle mouseDowns to bring divisions

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

5) I would not expect anyone to look at all of the code - JavaScript, CSS, HTML - that you provided in this question and give you advice -- it is simply too large.

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

Also, go to the authors if you have questions.

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