我正在做一个拖放项目,遇到了一个小问题。
我想在它被放到可放下的东西上之后禁用它。我有一个函数,disableDrag
,但我在控制台中收到一个错误,然后它会记录,但不执行该函数。
有人知道为什么吗?还有更好的办法吗?
HTML设置:
<div class="container">
<div id="key" class="fragment">
<div class="key"></div>
</div>
<div id="dragonkey" class="fragment">
<div class="key"></div>
</div>
<div id="inventory">
<div class="slot" id="slot1"></div>
<div class="slot" id="slot2"></div>
</div>
</div>
CSS设置:
.container{
width:300px;
height:300px;
background-color:#ccc;
}
#key, #dragonkey{
width:20px;
height:20px;
position:absolute !important;
z-index:999;
cursor:pointer;
background-color:DarkGoldenRod;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
#key{
top:5%;
left:5%;
}
#dragonkey{
top:15%;
left:5%;
}
#inventory{
width:68px;
height:68px;
position:relative;
float:right;
margin:5% 5% 0 0;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
.slot{
border:2px solid #fff;
width:30px;
height:30px;
float:left;
}
#slot1, #slot2{
background-color:rgba(0,0,0,1);
}
.ui-droppable-active{
background-color:rgba(184,134,11,0.7) !important;
}
这是jQuery设置:
// Javascript document
$(document).ready(function() {
$("#key").draggable({
containment: ".container"
});
$("#dragonkey").draggable({
containment: ".container"
});
$("#slot1").droppable({
accept: "#key",
drop: dropAnimate
});
$("#slot2").droppable({
accept: "#dragonkey",
drop: dropAnimate
});
function dropAnimate(event, ui) {
console.log( $(ui.draggable).attr('id'));
var $this = $(this);
var width = $this.width();
var height = $this.height();
var cntrLeft = (width / 2) - (ui.draggable.width() / 2);
var cntrTop = (height / 2) - (ui.draggable.height() / 2);
ui.draggable.position({
my: "center",
at: "center",
of: $this,
using: function(pos) {
$(this).animate(pos, "slow", "linear");
}
});
disableDrag();
}
function disableDrag () {
$(this).draggable({
disabled: true
});
console.log("DISABLED");
}
}); <!-- END OF DOCUMENT READY -->
最佳答案
您可以使用ui.draggable
元素将disabled: true
设置为:
ui.draggable.draggable({disabled: true});
检查此示例:
// Javascript document
$(document).ready(function() {
$("#key").draggable({
containment: ".container"
});
$("#dragonkey").draggable({
containment: ".container"
});
$("#slot1").droppable({
accept: "#key",
drop: dropAnimate
});
$("#slot2").droppable({
accept: "#dragonkey",
drop: dropAnimate
});
function dropAnimate(event, ui) {
console.log( $(ui.draggable).attr('id'));
var $this = $(this);
var width = $this.width();
var height = $this.height();
var cntrLeft = (width / 2) - (ui.draggable.width() / 2);
var cntrTop = (height / 2) - (ui.draggable.height() / 2);
ui.draggable.position({
my: "center",
at: "center",
of: $this,
using: function(pos) {
$(this).animate(pos, "slow", "linear");
}
});
ui.draggable.draggable({disabled: true});
}
}); <!-- END OF DOCUMENT READY -->
.container{
width:300px;
height:300px;
background-color:#ccc;
}
#key, #dragonkey{
width:20px;
height:20px;
position:absolute !important;
z-index:999;
cursor:pointer;
background-color:DarkGoldenRod;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
#key{
top:5%;
left:5%;
}
#dragonkey{
top:15%;
left:5%;
}
#inventory{
width:68px;
height:68px;
position:relative;
float:right;
margin:5% 5% 0 0;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
.slot{
border:2px solid #fff;
width:30px;
height:30px;
float:left;
}
#slot1, #slot2{
background-color:rgba(0,0,0,1);
}
.ui-droppable-active{
background-color:rgba(184,134,11,0.7) !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="container">
<div id="key" class="fragment">
<div class="key"></div>
</div>
<div id="dragonkey" class="fragment">
<div class="key"></div>
</div>
<div id="inventory">
<div class="slot" id="slot1"></div>
<div class="slot" id="slot2"></div>
</div>
</div>