, , .
, , . , DOM. , , , , , , MacOS Windows 20- , , . , JQuery, CSS, PHP.
, JQuery, , https://www.kirupa.com/html5/drag.htm. . , .
1. , .
2- - preventDefault() , preventDefault() stopPropagation() (. 1).
3- iOS Safari , , , , . (. 2)
MouseUp . , , , .
-, . .
So, my main question is for everyone who was here 9 years after the first question. Someone, meanwhile, has found a new / better textbook that looks at the general concept and current issues?
Image 1:
Image 2:
var dragItem = document.querySelector("#panel_1_header");
var container = document.querySelector("#panel_1");
var active = false;
var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;
container.addEventListener("touchstart", dragStart, false);
container.addEventListener("touchend", dragEnd, false);
container.addEventListener("touchmove", drag, false);
container.addEventListener("mousedown", dragStart, false);
container.addEventListener("mouseup", dragEnd, false);
container.addEventListener("mousemove", drag, false);
function dragStart(e) {
if (e.type === "touchstart") {
initialX = e.touches[0].clientX - xOffset;
initialY = e.touches[0].clientY - yOffset;
} else {
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
}
if (e.target === dragItem) {
active = true;
}
}
function dragEnd(e) {
initialX = currentX;
initialY = currentY;
active = false;
}
function drag(e) {
if (active) {
e=e || window.event;
pauseEvent(e);
if (e.type === "touchmove") {
currentX = e.touches[0].clientX - initialX;
currentY = e.touches[0].clientY - initialY;
} else {
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
}
xOffset = currentX;
yOffset = currentY;
setTranslate(currentX, currentY, container);
}
}
function setTranslate(xPos, yPos, el) {
el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}
function pauseEvent(e){
if(e.stopPropagation) e.stopPropagation();
if(e.preventDefault) e.preventDefault();
e.cancelBubble=true;
e.returnValue=false;
return false;
}
function contentClick(id){
alert('click registered from '+id)
}
body,td,th {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
<div id="container_1">
<div id="panel_1" style="touch-action: none; user-select: none; position: absolute; background-color: transparent; width: 320px; height: 150px; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; box-shadow: 2px 3px 5px black; border: none;">
<div id="panel_1_header" style="width: 100%; height: 24px; cursor: move; opacity:0.94; color:#444; overflow:hidden; text-align:center; overflow:hidden; background-color: #BBB; border-top: 1px solid black; border-right: 1px solid black; border-left: 1px solid black; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;">
<div id="panel_1_btn_star" onClick="contentClick(this.id);" style="float: left; width: 24px; height: 24px; cursor: pointer; color:white; font-size:15px; box-sizing:border-box; padding-top:0px; text-align:center; background-color: inherit; border-top-left-radius: 8px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;">
⭑
</div>
<div id="panel_1_btn_hide" onClick="contentClick(this.id);" style="float: right; width: 24px; height: 24px; cursor: pointer; color:white; font-size:19px; box-sizing:border-box; padding-top:0px; text-align:center; background-color: inherit; border-top-left-radius: 0px; border-top-right-radius: 8px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;">
×
</div>
<small>drag me somewhere</small>
</div>
<div id="panel_1_main" style="width: 100%; height: 103px; opacity:0.96; background-color: #EEE; border-right: 1px solid black; border-left: 1px solid black; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;">
<div id="panel_1_content" style="top:50%; padding:6px; text-align:center; height:100%; box-sizing:border-box">
<p>hello world</p>
<input id="panel_1_dummy" type="button" value="dummy" onClick="contentClick(this.id);">
</div>
</div>
<div id="panel_1_footer" style="width: 100%; height: 24px; opacity:0.94; overflow:hidden; background-color: #EEE; border-bottom: 1px solid black; border-right: 1px solid black; border-left: 1px solid black; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px;">
<div id="panel_1_btn_plus" onClick="contentClick(this.id);" style="float: left; width: 24px; height: 24px; color: #444; font-size:19px; padding-left:6px; padding-top:1px; box-sizing:border-box; cursor:pointer; background-color: inherit; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 8px;">
+
</div>
<div id="panel_1_btn_size" onClick="contentClick(this.id);" style="float: right; width: 24px; height: 24px; color: #444; font-size:12px; padding-left:8px; padding-top:4px; box-sizing:border-box; cursor:nwse-resize; background-color: inherit; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 8px; border-bottom-left-radius: 0px;">
⤡
</div>
</div>
</div>
</div>