Html 使用 CSS 使 Div 可拖动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13526712/
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
Make Div Draggable using CSS
提问by Jeet
I want to make my div tag with id "drag_me" to be draggable up to the length of 300px from left and 460px from top, only using CSS.
我想让我的 div 标签的 id 为“drag_me”，可以从左边拖动到 300px 和从顶部到 460px 的长度，只使用 CSS。
I also want to make it resizable. Again same condition as above i.e. no Javascript or jquery.
我也想让它调整大小。再次与上述条件相同，即没有 Javascript 或 jquery。
Can any one suggest the solution for this...
任何人都可以提出解决方案吗...
Thanks in advance to all
提前感谢大家
回答by Web_Designer
This is the best you can do without JavaScript:
这是没有 JavaScript 的最佳做法：
[draggable=true] {
cursor: move;
}
.resizable {
overflow: scroll;
resize: both;
max-width: 300px;
max-height: 460px;
border: 1px solid black;
min-width: 50px;
min-height: 50px;
background-color: skyblue;
}<div draggable="true" class="resizable"></div>回答by Alvaro
You can take a look at HTML 5, but I don't think you can restrict the area within you can drag it, just the destination:
你可以看看 HTML 5，但我认为你不能限制你可以拖动它的区域，只是目的地：
http://www.w3schools.com/html/html5_draganddrop.asp
http://www.w3schools.com/html/html5_draganddrop.asp
And if you don't mind using some great library, I would encourage you to try Dragula.
如果你不介意使用一些很棒的库，我鼓励你尝试Dragula。
回答by Dominik Schreiber
回答by Quentin
CSS is designed to describe the presentation of documents. It has a few features for changing that presentation in reaction to user interaction (primarily :hoverfor indicating that you are now pointing at something interactive).
CSS 旨在描述文档的呈现方式。它有一些功能可以根据用户交互更改该演示文稿（主要:hover用于指示您现在正在指向交互式内容）。
Making something draggable isn't a simple matter of presentation. It is firmly in the territory of interactivity logic, which is handled by JavaScript.
制作可拖动的东西并不是一个简单的展示问题。它牢牢地在由 JavaScript 处理的交互逻辑领域中。
What you want is not achievable.
你想要的东西是无法实现的。
回答by Alberto Carrasco García
You can do it now by using the CSS property -webkit-user-drag:
您现在可以使用 CSS 属性来实现-webkit-user-drag：
#drag_me {
-webkit-user-drag: element;
}<div draggable="true" id="drag_me">
Your draggable content here
</div>This property is only supported by webkit browsers, such as Safari or Chrome, but it is a nice approach to get it working using only CSS.
此属性仅受 webkit 浏览器（例如 Safari 或 Chrome）支持，但它是一种仅使用 CSS 使其工作的好方法。
The HTML5 draggableattribute is only set to ensure dragging works for other browsers.
HTML5draggable属性仅设置为确保拖动适用于其他浏览器。
You can find more information here: http://help.dottoro.com/lcbixvwm.php
您可以在此处找到更多信息：http: //help.dottoro.com/lcbixvwm.php
回答by Dhamu
Draggable div not possible only with CSS, if you want draggable div you must need to use javascript.
可拖动的 div not possible only with CSS，如果你想要可拖动的 div，你必须使用 javascript。
回答by Caleb Cole
I found this is really helpful:
我发现这真的很有帮助：
// Make the DIV element draggable:
dragElement(document.getElementById("mydiv"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
// if present, the header is where you move the DIV from:
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
// otherwise, move the DIV from anywhere inside the DIV:
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
}#mydiv {
position: absolute;
z-index: 9;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
text-align: center;
}
#mydivheader {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
} <!-- Draggable DIV -->
<div id="mydiv">
<!-- Include a header DIV with the same name as the draggable DIV, followed by "header" -->
<div id="mydivheader">Click here to move</div>
<p>Move</p>
<p>this</p>
<p>DIV</p>
</div> I hope you can use it to!
我希望你能用它！
回答by kumar chandraketu
$('#dialog').draggable({ handle: "#tblOverlay" , scroll: false });
// Pop up Window
<div id="dialog">
<table id="tblOverlay">
<tr><td></td></tr>
<table>
</div>
Options:
选项：
- handle : Avoids the sticky scroll bar issue. Sometimes your mouse pointer will stick to the popup window while dragging.
- scroll : Prevent popup window to go beyond parent page or out of current screen.
- handle ：避免粘性滚动条问题。有时您的鼠标指针会在拖动时粘在弹出窗口上。
- scroll : 防止弹出窗口超出父页面或超出当前屏幕。
回答by James
After going down the rabbit-hole of trying to do this myself by copy-pasting various code-snippets from Stack Overflow, I would highly recommend just using the InteractJS library, which allows you to create a draggable and resizable div (somewhat) easily.
在尝试通过从 Stack Overflow 复制粘贴各种代码片段来自己尝试这样做之后，我强烈建议您只使用InteractJS 库，它允许您轻松创建可拖动和可调整大小的 div（有点）。
