드래그 가능한 항목을 특정 부분으로 드래그 할 수 없습니다.

처음 게시하는 경우 도움이됩니다. 내 목표는 sidemenu (이미지를 클릭하면 팝업)에서 이미지를 테이블로 드래그하는 것입니다.하지만 드래그하는 동안 이미지는 특정 부분 (보이지 않는 사각형 경계)을 지나치거나 놓을 수 없습니다. 드래그 가능한 항목을 특정 부분으로 드래그 할 수 없습니다.

.container { 
 
    
 
    position:relative; 
 
    display:inline-block; 
 
    overflow:hidden; 
 
\t height:6vh; 
 
\t width:6vh; 
 
} 
 

 

 

 
#bord { 
 
border: 5px solid blue; 
 
display:table; 
 
border-radius:12px; 
 
margin:15px; 
 
width:80%; 
 
height:95%; 
 
} 
 

 
body { 
 
font-size:100%; 
 
} 
 

 
.organizer { 
 
float:left; 
 
width:100%; 
 
margin:auto; 
 
min-width:600px; 
 
max-width:12000px; 
 
height:100%; 
 
min-height:400px; 
 
max-height:9000px; \t 
 
    border-collapse: collapse; 
 
text-align:center; 
 
font-family: Impact, Charcoal, sans-serif; 
 
font-size:2.5em; 
 
} 
 
.organizer td{ 
 
    border: 5px solid red; 
 
    border-radius:12px; 
 
} 
 

 
.organizer tr:first-child td { 
 
    border-top: 0; 
 
} 
 
.organizer tr:last-child td { 
 
    border-bottom: 0; 
 
} 
 

 
.organizer tr td:last-child 
 
{ 
 
    border-right: 0; 
 
width:75%; 
 
} 
 
.organizer tr td:first-child 
 
{ 
 
    border-left: 0; 
 
width:25%; 
 
} 
 

 

 

 
.nav { 
 
height: 100%; 
 
width: 0; 
 
top: 0; 
 
left: 0; 
 
position:fixed; 
 
background-color: #6194BC; 
 
overflow-x: hidden; 
 
padding-top: 60px; 
 
transition: 0.5s; 
 
z-index:1; 
 

 
} 
 
.nav a { 
 
    padding: 8px 8px 8px 32px; 
 
    text-decoration: none; 
 
    font-size: 25px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s 
 
} 
 

 

 
.nav .close{ 
 
position: absolute; 
 
top: 0; 
 
right: 25px; 
 
font-size: 36px; 
 
margin-left: 50px; 
 
color:red; 
 

 
} 
 

 
#main { 
 
transition: margin-left .5s; 
 
padding: 16px; 
 
} 
 

 

 
@media screen and (max-height: 450px) { 
 
    .sidenav {padding-top: 15px;} 
 
    .sidenav a {font-size: 18px;} 
 
} 
 

 
.dock table{ 
 
width:100%; 
 
} 
 
.dock td{ 
 
width:50%; 
 
height:100px;} 
 

 
.dock img { 
 
max-width:calc(100% - 20px); 
 
height:auto; 
 
padding:10px; 
 
} 
 

 
.openbutton { 
 
font-size:30px;cursor:pointer;width:5%; 
 
} 
 

 
.cel { 
 
height:100%; 
 
width:25%; 
 
display:inline-block; 
 
} 
 

 
.cel img { 
 
height: 50%; 
 
width:25%; 
 
display:inline-block; 
 
}

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
<title>schedhule</title> 
 

 
<link rel="stylesheet" href="styles.css"> 
 

 

 
<script> 
 
function openNav() { 
 
document.getElementById("gallery").style.width = "250px"; 
 
document.getElementById("main").style.marginLeft = "250px"; 
 
} 
 

 
function closeNav() { 
 
document.getElementById("gallery").style.width= "0"; 
 
document.getElementById("main").style.marginLeft = "0"; 
 
} 
 
</script> 
 

 
</head> 
 
<body> 
 

 

 

 
<!--gallery--> 
 
<div id="gallery" class="nav"> 
 
<!--close button--> 
 
<a href="javascript:void(0)" class="close" onclick="closeNav()">&times;</a> 
 
<!--add gallery in here--> 
 

 

 
<table class="dock"> 
 
<tr> 
 
<td> <img class="draggable1" src="https://img.clipartfest.com/b25f3b543097d34c45d24e5fb41fbe10_slate-apple-clip-art-at-vector-math-clipart-png_486-599.png" > </td> 
 
<td> <img class ="draggable1" src="https://img.clipartfest.com/c00a60b73276d59e3506fbfdcf81d53b_29625d01b3af8a6072a786f05392e7-clipart-reading-png_282-335.png"> </td> 
 
</tr> 
 
<tr> 
 
<td> <img class="draggable1" src="https://img.clipartfest.com/3c8a1eb1e687603105ddacd128e7e974_paint-palette-and-brush-clip-art-pallette-clipart-png_500-379.png" </td> 
 
<td> <img class="draggable1" src="http://www.clker.com/cliparts/6/c/9/a/1349205988576365258Old%20Computer.svg.med.png"> </td> 
 
</tr> 
 
<tr> 
 
<td> <img class="draggable1" src="http://www.clker.com/cliparts/d/5/c/a/1194985205336006011blocco_notes.svg.hi.png"> </td> 
 
<td> </td> 
 
</tr> 
 
</table> 
 

 
</div> 
 

 
<!--Open button--> 
 
<span class="openbutton" onclick="openNav()"> 
 
<div class="container"> 
 
<img src="http://www.iconsfind.com/wp-content/uploads/2014/02/Apps-gallery-icon.png" style="height:100%;width 100%;"> 
 
    </div> 
 
</span> 
 

 
<div id="main"> 
 
<div id="bord"> 
 
<table class="organizer"> 
 
<tr> 
 
<td>1</td> 
 
<td><div class="drop cel"></div><div class="drop cel"></div><div class="drop cel"></div><div class="drop cel"></div> </td> 
 
</tr> 
 
<tr> 
 
<td>2</td> 
 
<td><div class="drop cel"></div><div class="drop cel"></div><div class="drop cel"></div><div class="drop cel"></div></td> 
 
</tr> 
 
<tr> 
 
<td>L</td> 
 
<td><div class="drop cel"></div><div class="drop cel"></div><div class="drop cel"></div><div class="drop cel"></div></td> 
 
</tr><tr> 
 
<td>3</td> 
 
<td><div class="drop cel"></div><div class="drop cel"></div><div class="drop cel"></div><div class="drop cel"></div></td> 
 
</tr><tr> 
 
<td>4</td> 
 
<td><div class="drop cel"></div><div class="drop cel"></div><div class="drop cel"></div><div class="drop cel"></div></td> 
 
</tr> 
 
</table> 
 
</div> 
 
</div> 
 

 

 

 

 
</body> 
 
<script 
 
    src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script 
 
    src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<script> 
 

 
$(".draggable1").draggable({ 
 
appendTo: 'div#bord', 
 
containment: 'window', 
 
helper:'clone', 
 

 
start: function(event,ui) { 
 
     $(ui.helper).css({'width':"100px",'z-index':"1"}); //drag dimensions 
 
    } 
 

 
    
 

 
}); 
 

 
$(".drop").droppable({ 
 
tolerance: 'pointer', 
 
    drop: function(event, ui) { 
 
     $(this).append($(ui.helper.children())); 
 
    } 
 

 
}); 
 

 

 

 
    
 
</script> 
 
</html>

는

출처

2017-05-18 JasGill

스택 오버플로에 오신 것을 환영합니다. 작업 예제에서 문제를 보는 것이 도움이 될 수 있습니다. jsfiddle.net이이를 수행하는 좋은 방법입니다. 언뜻보기에 나는이 문제를 일으키는 코드를 보지 못했습니다. 브라우저 콘솔에 오류나 경고가 표시됩니까? – Twisty

이전에 jsfiddle.net을 사용하지 않은 경우 https://jsfiddle.net/Twisty/rjygut83/ – Twisty

질문에 대한 작업 예제를 만들었습니다. 주석을 'containment' 옵션으로 주석 처리하면 해당 지점 위로 항목을 드래그하십시오. – Twisty

window는 containment에 대한 문제가 될 것으로 보인다. 나는 document으로 테스트했으며 더 잘 작동합니다.

작업 예 : https://jsfiddle.net/Twisty/rjygut83/2/ 쇼 : https://jsfiddle.net/Twisty/rjygut83/2/show/

자바 스크립트

$(function() { 
    function openNav(e) { 
    e.preventDefault(); 
    $("#main").animate({ 
     marginLeft: 250 
    }, 250, function() { 
     $("#gallery").show("slow"); 
    }); 
    } 

    function closeNav(e) { 
    e.preventDefault(); 
    $("#gallery").hide() 
    $("#main").css("margin-left", 0); 
    } 

    $(".openbutton").click(openNav); 
    $(".close").click(closeNav); 

    $(".draggable1").draggable({ 
    appendTo: 'div#bord', 
    containment: "document", 
    helper: 'clone', 
    start: function(event, ui) { 
     $(ui.helper).css({ 
     'width': "100px", 
     'z-index': "1" 
     }); //drag dimensions 
    } 
    }); 

    $(".drop").droppable({ 
    tolerance: 'pointer', 
    drop: function(event, ui) { 
     $(this).append($(ui.helper.children())); 
    } 
    }); 
});

당신은 내가 모든 jQuery를 사용하는 코드의 일부를 업데이트 볼 수 있습니다. 그냥 개인적인 취향.

출처

2017-05-18 21:19:20 Twisty

감사합니다 twisty, 당신은 정말로 바이올린과 전환과 나를 도왔습니다. 그러나 오류는 없으며 imgs는 매우 이상한 방식으로 작동합니다. 나는 드래그 가능한 영역을 제한하지 않았지만, 이미지는 특정 지점을 지나서 움직이지 않습니다. 당신이 저를 도울 수 있다면, 그것은 굉장 할 것입니다. – JasGill

하지만 'containment' 옵션으로 한도를 설정했습니다. 당신이 묘사 한대로 나의보기가 작동하는 것처럼 혼란 된 종류. – Twisty

창으로 설정했지만 이미지가 완벽하게 이동하지 않습니다. – JasGill

드래그 가능한 항목을 특정 부분으로 드래그 할 수 없습니다.

답변

관련 문제