Question

新手在这里。我正在制作一个示例jQuery用户界面，即使用两个可放置的var luckyNumber = x; var guesses=1; document.getElementById("start").onclick=function(){ //init counters once guesses=0; x=Math.floor(Math.random()*6); gotit = false; } document.getElementById("guess").onclick=function() { // guess as many times as you want if(document.getElementById("myNumber").value==x) { gotit=true; } guesses++; if(gotit){ alert("Got it! It was a " + x + ". It only took me " + guesses + " guesses!"); } }和一些可拖动的元素。如何使两个droppable div不接受多个可拖动元素。我用Google搜索了，但没有找到任何解决方法。有人帮忙吗？

这是我的示例代码加上小提琴：http://jsfiddle.net/kd5q594g/2/

HTML

div

CSS

<div class="ui-widget ui-helper-clearfix">
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
    <li class="ui-widget-content ui-corner-tr"> 
        <a href="http://www.imageno.com/6kkcc9rmpq0rpic.html"   target="_blank"><img   src="http://www.imageno.com/thumbs/20150518/6kkcc9rmpq0r.jpg"  width="96"   height="72">
    </li>
    <li class="ui-widget-content ui-corner-tr">
        <a href="http://www.imageno.com/6kkcc9rmpq0rpic.html" target="_blank"><img src="http://www.imageno.com/thumbs/20150518/6kkcc9rmpq0r.jpg"  width="96" height="72">
    </li>
    <li class="ui-widget-content ui-corner-tr">
        <a href="http://www.imageno.com/6kkcc9rmpq0rpic.html" target="_blank"><img src="http://www.imageno.com/thumbs/20150518/6kkcc9rmpq0r.jpg" width="96" height="72">
    </li>
    <li class="ui-widget-content ui-corner-tr">
        <a href="http://www.imageno.com/6kkcc9rmpq0rpic.html" target="_blank"><img src="http://www.imageno.com/thumbs/20150518/6kkcc9rmpq0r.jpg" width="96" height="72">
    </li>
    <li class="ui-widget-content ui-corner-tr">
        <a href="http://www.imageno.com/6kkcc9rmpq0rpic.html" target="_blank"><img src="http://www.imageno.com/thumbs/20150518/6kkcc9rmpq0r.jpg" width="96" height="72">
    </li>
</ul>
</div>
<div id="trash" class="ui-widget-content">
 <h1 class="ui-widget-header">Disagree</h1>

</div>
<div id="trash2" class="ui-widget-content">
 <h1 class="ui-widget-header">Agree</h1>

</div>

JS

#gallery {
float: left;
width: 65%;
min-height: 11em;
}
.gallery.custom-state-active {
background: #eee;
}
.gallery li {
float: left;
width: 96px;
padding: 0.10em;
margin: 0 0.4em 0.4em 0;
}
.gallery li img {
width: 100%;
cursor: move;
}
#trash {
float: left;
width: 20%;
min-height: 10em;
padding: 1%;
display: block;
margin: 0.3em;
}
#trash2 {
float: left;
width: 20%;
min-height: 10em;
padding: 1%;
display: block;
margin: 0.3em;
}
h1 {
font-size: 1em;
text-align: center;
}

Answer 1

在drop事件中，检查元素是否droppable元素中包含可拖动元素，如果已存在则返回false。

Answer 2

在drop的{{1}}功能中，只需停用droppable功能，即只发生一次。

droppable

jQuery UI - Droppable div只接受一个draggable

2 个答案: