拖放HTML代码不起作用

我的拖放HTML代码不起作用，我无法将框拖到红框，下面是代码，我可以打开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>

来源

2017-05-26 Naveen Gupta

ü可以检查JS错误控制台。你提到的代码似乎工作正常，我假设你的$ {TBC}脚本是抛出和错误什么打破JS –

你可以试试这个，

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

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

来源

2017-05-26 06:11:47

这里是你的工作方案。

对于投掷的功能，你需要添加accept: ".draggable",

$(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)); 
 
    } 
 
}); 
 

 
})

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

<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>

来源

2017-05-26 06:28:04

拖放HTML代码不起作用

回答

相关问题