46 lines
1.1 KiB
HTML
46 lines
1.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>Drag Handle</title>
|
||
|
|
<style>
|
||
|
|
#draggable {
|
||
|
|
width: 100px;
|
||
|
|
height: 100px;
|
||
|
|
border: 1px solid black;
|
||
|
|
}
|
||
|
|
#handle {
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
border-right: 20px solid transparent;
|
||
|
|
border-top: 20px solid black;
|
||
|
|
cursor: move;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Drag Handle</h1>
|
||
|
|
|
||
|
|
<div id="draggable" draggable="true">
|
||
|
|
<div id="handle">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var draggable = document.getElementById('draggable');
|
||
|
|
var handle = document.getElementById('handle');
|
||
|
|
var target = false;
|
||
|
|
draggable.onmousedown = function(e) {
|
||
|
|
target = e.target;
|
||
|
|
};
|
||
|
|
draggable.ondragstart = function(e) {
|
||
|
|
if (handle.contains(target)) {
|
||
|
|
e.dataTransfer.setData('text/plain', 'handle');
|
||
|
|
} else {
|
||
|
|
e.preventDefault();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|