Question

我想让id为“drag_me”的div标签可以从左边开始拖动300px，从顶部移动460px，只使用CSS。

我也想让它可以调整大小。再次与上述条件相同，即没有Javascript或jquery。

任何人都可以为此提出解决方案......

提前感谢所有

Answer 1

这是没有JS的最佳选择：

<强> HTML：

<div draggable="true" class="resizable"></div>

<强> CSS：

[draggable=true] {
    cursor: move;
}

.resizable {
    overflow: scroll;
    resize: both;
    max-width: 300px;
    max-height: 460px;
}

<强> Demo

Answer 2

你可以看看HTML 5，但我不认为你可以限制你可以拖动它的区域，只是目的地：

http://www.w3schools.com/html/html5_draganddrop.asp

如果你不介意使用一些很棒的图书馆，我建议你试试Dragula。

Answer 3

我只能使用css技术。但你可以使用jqueryui draggable：

$('#drag_me').draggable();

Answer 4

CSS旨在描述文档的表示。它具有一些用于更改演示文稿以响应用户交互的功能（主要是:hover，用于指示您现在指向交互式内容）。

使可拖动的东西不是简单的呈现问题。它完全属于交互逻辑领域，由JavaScript处理。

你想要的是无法实现的。

Answer 5

您现在可以使用CSS属性“-webkit-user-drag”：

来完成

HTML：

<div draggable="true" id="drag_me">
    Your draggable content here
</div>

CSS：

#drag_me{
    -webkit-user-drag: element;
}

仅支持Webkit浏览器，例如Safari或Chrome，但这是一种很好的方法，只能使用CSS。

HTML5 draggable属性仅设置为确保其适用于其他浏览器。

您可以在此处找到更多信息：http://help.dottoro.com/lcbixvwm.php

Answer 6

我发现这真的很有帮助：

// 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>

希望您可以使用它！

Answer 7

Draggable div not possible only with CSS，如果你想要可拖动的div，你必须使用javascript。

http://jqueryui.com/draggable/

Answer 8

KeyError

选项：

句柄：避免粘滞滚动条问题。有时拖动时鼠标指针会粘在弹出窗口上。
scroll：阻止弹出窗口超出父页面或超出当前页面屏幕。

Answer 9

在尝试通过从Stack Overflow复制粘贴各种代码片段来自己完成任务之后，我强烈建议仅使用InteractJS library，它允许您创建可拖动且可调整大小的div（有点）容易。

使用CSS制作Div Draggable

9 个答案:

HTML：

CSS：