У меня есть перетаскиваемый родительский элемент, в котором есть тег выбора. Родительский элемент полностью перетаскивается, но тег select, присутствующий внутри Draagable Parent, не открывается
это ссылка jsfiddle для проблемы Пожалуйста, подскажите, что мне делать, чтобы открыть select в этом сценарии PFB код:
<!DOCTYPE HTML>
<html>
<head>
<style>
#myModal {
position: absolute;
z-index: 9; height: 200px; width: 200px;
background-color: #f1f1f1;
text-align: center;
border: 1px solid #d3d3d3;
top: 0;
right: 0;}
#myModalheader {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;}
</style>
<script>
function ready() {
dragElement(document.getElementById("myModal"));
}
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id)) {
document.getElementById(elmnt.id).onmousedown = dragMouseDown;}
else {elmnt.onmousedown = dragMouseDown;}
function dragMouseDown(w) {
w = w || window.event;
w.preventDefault();
pos3 = w.clientX;
pos4 = w.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;}
function elementDrag(w) {
w = w || window.event;
w.preventDefault();
pos1 = pos3 - w.clientX;
pos2 = pos4 - w.clientY;
pos3 = w.clientX;
pos4 = w.clientY;
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;}}
document.addEventListener("DOMContentLoaded", ready);
</script>
</head>
<body>
<div id="myModal">
<div id="myModalheader">Click here to move</div>
<p>Move</p><p>this</p><p>DIV</p>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
</body>
</html>