我有项目,我可以拖放它们。现在,在我放下 Item 之后,我想检查我的对象是否在正确的容器中。
实现此目标的最佳方法是什么?
这是我的功能:
$(function () {
$("#draggable").draggable();
$(".item").droppable({
drop: function (event, ui) {
var $this = $(this);
$this.append(ui.draggable);
var draggableWidth = $('#draggable').width();
var draggableHeight = $('#draggable').height();
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.animate({width: draggableWidth * 1.1, height: draggableHeight * 1.1});
ui.draggable.animate({width: draggableWidth, height: draggableHeight});
ui.draggable.css({
left: cntrLeft + "px",
top: cntrTop + "px"
});
// this here is still hard-coded, but it should trigger on the element I'm holding (image)
console.log($('#draggable4').data('image'));
console.log($(this).data('target'));
}
});
});
如果您看一下这个例子:JSFiddle你可以看到,我实际上坚持的是什么。您可以移动框中的黄色方 block ,但如果正确则没有反馈。
再澄清一点:假设我有 2 个正方形,一个黄色和一个红色。如果黄色方 block 落在左侧框上,则应显示错误。否则应该出现一个勾号(不是那种问题)。 红色的也一样。如果红色的落在正确的盒子里,它应该会抛出一个错误……你明白了。
更新 1:
我的 HTML
<div class="item" data-target="1"></div>
<div class="item2" data-target="2"></div>
<div class="item3" data-target="3"></div>
<div class="item4" data-target="4"></div>
<div style="position: relative; height: 100%;">
<img src="folie1/img1.png" width="153" height="124" id="draggable" style="z-index: 200;" data-image="1"/>
<img src="folie1/img2.png" width="153" height="124" id="draggable2" style="z-index: 201;" data-image="2"/>
<img src="folie1/img3.png" width="153" height="124" id="draggable3" style="z-index: 202;" data-image="3"/>
<img src="folie1/img4.png" width="153" height="124" id="draggable4" style="z-index: 203;" data-image="4"/>
</div>
我想检查当前对象(比如 data-image="1"
)是否被放入容器 data-target="1"
。
更新 2
现在这是我的 HTML:
<div class="item" id="item" data-target="1"></div>
<div class="item" id="item2" data-target="2"></div>
<div class="item" id="item3" data-target="3"></div>
<div class="item" id="item4" data-target="4"></div>
<div style="position: relative; height: 100%;">
<img src="folie1/img1.png" width="153" height="124" id="draggable" class="draggable"
style="z-index: 200;" data-image="1"/>
<img src="folie1/img2.png" width="153" height="124" id="draggable2" class="draggable"
style="z-index: 201;" data-image="2"/>
<img src="folie1/img3.png" width="153" height="124" id="draggable3" class="draggable"
style="z-index: 202;" data-image="3"/>
<img src="folie1/img4.png" width="153" height="124" id="draggable4" class="draggable"
style="z-index: 203;" data-image="4"/>
</div>
...使用来自 Rajen Ranjith 的 JS
$(function () {
var result = {};
$(".draggable").draggable({
start: function (e) {
result.drag = e.target.id.split("_")[1];
}
});
$(".item").droppable({
drop: function (event, ui) {
var $this = $(this);
result.drop = event.target.id.split("_")[1];
if (result.drag == result.drop)
alert("true");
else
alert("false");
$this.append(ui.draggable);
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.css({
left: cntrLeft + "px",
top: cntrTop + "px"
});
}
});
});
我可以拖放我的图像,但它总是提示“真”。
最佳答案
对拖动元素和放置元素都使用 id 或属性 http://jsfiddle.net/rajen_ranjith/F3sD3/285/
$(function() {
var result = {};
$(".draggable").draggable({
start:function(e){
result.drag = e.target.id.split("_")[1];
}
});
$(".item").droppable({
drop: function(event, ui) {
var $this = $(this);
result.drop = event.target.id.split("_")[1];
if(result.drag == result.drop)
alert("true");
else
alert("false");
$this.append(ui.draggable);
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.css({
left: cntrLeft + "px",
top: cntrTop + "px"
});
}
});
});
关于javascript - 检查可拖动对象是否在正确的可放置容器中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32329397/