使用CSS制作Div Draggable

Question

我想让id为"drag_me"的div标签可以从左边移动到300px,从顶部移动到460px,只使用CSS.

我也希望它可以调整大小.再次与上面相同的条件,即没有Javascript或jquery.

任何人都可以为此建议解决方案......

在此先感谢所有人

Answer 1

这是没有JS的最佳选择:

HTML:

[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;
}

CSS:

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

演示

• draggable HTML5 Rocks上的属性
• resizeMDN上的CSS 属性

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：

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

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

Webkit浏览器（例如Safari或Chrome）仅支持此属性，但这是一种仅使用CSS使其工作的好方法。

draggable设置HTML5 属性只是为了确保拖动可用于其他浏览器。

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

Answer 6

我从 W3Schools发现这个真的很有帮助：

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

纯 CSS 中的可拖动和可调整大小的对话框是可能的。

对话框参数

• 左：40 像素 ... 300 像素
• 顶部：40 像素 ... 460 像素
• 宽度：150 像素 ... 300 像素
• 高度：100 像素 ... 200 像素

重定位原则：对话框位于表格的第二行第二列。在表格的第一列和第一行中，有另一个可以调整大小的 div。通过调整第一个单元格的大小来移动表格的第二个单元格。

使用第一个单元格的负边距将缩放器移动到第二个单元格上，并使用剪辑路径进行剪切。

默认缩放器图标覆盖有图像。

我为我的英语感到抱歉。

:root {
--resizer-size:18px;
--border-size:3px;
}
.area {
position:relative;
background-color:white;
width:700px;
height:700px;
font-size:14px;
line-height:30px
}
.tbl {
position:absolute;
border-collapse:collapse;
pointer-events:none
}
.tbl TD {
padding:0
}
.mover {
position:relative;
background-color:yellow;
top:0;
left:0;
width:200px; /*Default left*/
height:100px; /*Default top*/
resize:both;
overflow:auto;
margin-bottom:calc(var(--border-size)*-1 - var(--resizer-size));
margin-right:calc(var(--border-size)*-1 - var(--resizer-size));
z-index: 1;
pointer-events:all;
clip-path: polygon(calc(100% - var(--resizer-size)) calc(100% - var(--resizer-size)), 100% calc(100% - var(--resizer-size)), 100% 100%, calc(100% - var(--resizer-size)) 100%);
min-width:40px;  /*4x Limits dialog position*/
max-width:300px;
min-height:40px;
max-height:460px
}
.moverIco {
position:absolute;
bottom:0px;
right:0px;
width:var(--resizer-size);
height:var(--resizer-size);
background:black;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" \
  d="M13,11H18L16.5,9.5L17.92,8.08L21.84,12L17.92,15.92L16.5,14.5L18,13H13V18L14.5,16.5L15.92,17.92L12,21.84L8.08,17.92L9.5,16.5\
  L11,18V13H6L7.5,14.5L6.08,15.92L2.16,12L6.08,8.08L7.5,9.5L6,11H11V6L9.5,7.5L8.08,6.08L12,2.16L15.92,6.08L14.5,7.5L13,6V11Z" /></svg>')
}
.dialog {
position:relative;
top:0;
left:0;
width:200px; /*Default width*/
height:120px; /*Default height*/
border:var(--border-size) solid green;
background-color:#EEE;
resize:both;
overflow:auto;
pointer-events:all;
text-align:center;
min-width:150px; /*4x Limits dialog size*/
max-width:300px;
min-height:100px;
max-height:200px
}
.dialog .head {
background:green;
color:white;
font-weight:bold;
padding-left:calc(var(--border-size) + var(--resizer-size));;
font-family:sans-serif;
font-size:14px;
height:calc(var(--border-size) + var(--resizer-size));;
line-height:var(--resizer-size);
text-align:left
}

<DIV class=area>
  <TABLE class=tbl>
    <TR>
      <TD>
        <DIV class=mover>
          <DIV class=moverIco></DIV>
        </DIV>
      </TD>
      <TD></TD>
    </TR>
    <TR>
      <TD></TD>
      <TD>
        <DIV class=dialog>
          <DIV class=head>Dialog</DIV><BR>Sure?<BR><BUTTON>Yes</BUTTON> <BUTTON>No</BUTTON>
        </DIV>
      </TD>
    </TR>
  </TABLE>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam dictum tincidunt diam. Phasellus faucibus molestie nisl.
Nunc dapibus tortor vel mi dapibus sollicitudin. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Nam quis nulla.
Nullam sit amet magna in magna gravida vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Pellentesque pretium lectus id turpis. Curabitur sagittis hendrerit ante. Nullam feugiat, turpis at pulvinar vulputate,
erat libero tristique tellus, nec bibendum odio risus sit amet ante. Aenean vel massa quis mauris vehicula lacinia. Fusce suscipit libero eget elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam dictum tincidunt diam. Phasellus faucibus molestie nisl.
Nunc dapibus tortor vel mi dapibus sollicitudin. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Nam quis nulla.
Nullam sit amet magna in magna gravida vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Pellentesque pretium lectus id turpis. Curabitur sagittis hendrerit ante. Nullam feugiat, turpis at pulvinar vulputate,
erat libero tristique tellus, nec bibendum odio risus sit amet ante. Aenean vel massa quis mauris vehicula lacinia. Fusce suscipit libero eget elit.
</DIV>