0

.md {
  position: fixed;
  left: 14px;
  top: 14px;
  width: 250px;
  text-align: center;
}

.mdtop {
  background: green;
  color: white;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.mdtopmove {
  border-left: 2px solid white;
  border-right: 2px solid white;
  cursor: cell;
}

.mdbody {
  height: 45px;
  background: #eee;
  margin-top: 3px;
  border: 2px solid blue;
}
<div class='md' draggable='true'>
  <div class='mdtop'>
    <div class='mdtopclose'>CLOSE</div>
    <div class='mdtopmove'>MOVE</div>
    <div class='mdtopsave'>SAVE</div>
  </div>
  <div class='mdbody'>BODY</div>
</div>

I'm trying to make .md horizontally draggable without using jquery ui, just using HTML5 API.
There is draggable = 'true' but what else should I do?
handle should be mdtopmove.
Any help?

Mark Baijens
  • 13,028
  • 11
  • 47
  • 73
  • Did you look at the docs it has an example? https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API – Dominic Sep 05 '18 at 10:46
  • @Dominic, there is no such an example on your link. Just move a div left and right using a handle and HTML5 API. –  Sep 05 '18 at 10:48
  • I don't think you can limit it to just left and right, you don't control that part – Dominic Sep 05 '18 at 10:54
  • Possible duplicate of [HTML5 draggable within a boundary](https://stackoverflow.com/questions/14967944/html5-draggable-within-a-boundary) – Sparky Sep 05 '18 at 10:56

0 Answers0