Question

首次发布此处，非常感谢任何帮助。我的目标是将图像从侧面菜单（单击图像时弹出）拖动到表格中。然而，拖动图像时，图像不会掉落或经过某个部分（不可见的方形边界）。

.container {
   
    position:relative;
    display:inline-block;
    overflow:hidden;
	height:6vh;
	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;	
  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>

Answer 1

window似乎是containment的问题。我使用document进行了测试，效果更好。

工作示例：https://jsfiddle.net/Twisty/rjygut83/2/ 显示：https://jsfiddle.net/Twisty/rjygut83/2/show/

<强>的JavaScript

$(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。只是个人偏好。

拖拽项目无法通过某些部分拖动

1 个答案: