Question

我的拖放HTML代码无法正常工作，我无法将框拖到红色框中，下面是代码，我可以打开html网页，我的框也在那边，但我无法执行拖放操作。

Below is the link to the image of my HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Drag and drop</title>
<style type="text/css">${TBC}</style>
<script src="https://ajax.googleapis.com/
ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/
ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
</head>
<body>
<header>
<h1>Drag and drop</h1>
</header>

<div>
<p>Drop items onto the red square to remove them</p>
<div id="obliterate"></div>
<u1>
  <li>
     <div id="one" href="#" class="draggable">one</div>
  </li>
  <li>
     <div id="two" href="#" class="draggable">two</div>
  </li>
  <li>
     <div id="three" href="#" class="draggable">three</div>
  </li>
  <li>
     <div id="four" href="#" class="draggable">four</div>
  </li>
  <li>
     <div id="five" href="#" class="draggable">five</div>
  </li>
</u1>
</div>
</body>
<script type="application/javascript">${TBC}</script>


<style type="text/css">
   li {
       list-style: none;
       }

   li div {
      text-decoration: none;
      color; #000;
      margin: 10px;
      width: 150px;
      float: left;
      border: 2px groove black;
      background: #eee;
      padding: 10px;
      display: block;
      text-align: center;
      }

   u1 {
       margin-left: 200px;
       min-height: 300px;
      }

   #obliterate {
       background-color: red;
       height: 250px;
       width: 166px;
       float: left;
       border: 5px solid #000;
       position: relative;
       margin-top: 0;
      }
</style>

<script type="application/javascript">
$(function () {
    $(".draggable").draggable();

    $('#obliterate').droppable({
        drop: function (event, ui) {
           ui.draggable.remove();
     }
 });
});
</script>
</html>

Answer 1

你可以试试这个，

 $(".draggable").draggable({
     revert: "invalid", 
     cancel: "a.ui-icon",
     containment: "document",
     helper: "clone",
     cursor: "pointer"
 });

您也可以参考以下链接：http://jsfiddle.net/mL338128/57/

Answer 2

这是您的工作解决方案。

对于可投放功能，您需要添加accept: ".draggable",

＆＃13;

$(document).ready(function(){

$(".draggable").draggable({
    appendTo: "body",
    cursor: "move",
    helper: 'clone',
    revert: "invalid"
});

$("#obliterate").droppable({
    tolerance: "intersect",
    accept: ".draggable",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
        $("#obliterate").append($(ui.draggable));
    }
});

})

＆＃13;

#obliterate{
  background:red;
  height:300px;
  width:200px;
}
li{  
display:inline-block;
}
.draggable{
  width:150px;
  display:inline-block;
  padding:10px;
  border:1px solid;
  margin:5px;
}

＆＃13;

<body>
<header>
<h1>Drag and drop</h1>
</header>

<div>
<p>Drop items onto the red square to remove them</p>
<div id="obliterate"></div>
<u1 id="main-list">
  <li>
     <div id="one" href="#" class="draggable">one</div>
  </li>
  <li>
     <div id="two" href="#" class="draggable">two</div>
  </li>
  <li>
     <div id="three" href="#" class="draggable">three</div>
  </li>
  <li>
     <div id="four" href="#" class="draggable">four</div>
  </li>
  <li>
     <div id="five" href="#" class="draggable">five</div>
  </li>
</u1>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

</body>

＆＃13;

拖放html代码无法正常工作

2 个答案: