Question

我在我的网站上使用jquery .dragable / .dropable。

http://www.chaosdesign.com/production/ernst-young/2014/landingpage/

如果所有项目都放在正确的位置，我想触发一个事件 - 它基本上会说“做得好”

我想这样做的方法是获取拖动项和拖放项的坐标，然后写一个if语句来说明.offset值是否相同。

我目前的JS

var snapPos = $('.word1').offset();
var wordPos = $('.snap1').offset();

if ($(wordPos) == $(snapPos)){
alert("hello");
}

但这不起作用。

我还注意到，当我只对var snapPos或wordPos发出警报时，返回的值是[object Object]。我期待它返回X / Y坐标？这是对的吗？

由于

修改

var snapPos = $('.snap1').offset().top.left;
var wordPos = $('.word1').offset().top.left;

if (wordPos == snapPos){
alert("hello");
}

Answer 1

如果您想获得最高偏移量，则需要使用：

var snapPos = $('.word1').offset().top; // $('.word1').offset().left to get left offset
var wordPos = $('.snap1').offset().top;

然后将if条件的代码更改为：

if (wordPos == snapPos){
    alert("hello");
}

Answer 2

使用设置了drop选项的droppable accept事件，以便在相应元素上删除可接受的元素时获取事件回调

$( ".selector" ).droppable({ 
   accept: ".someDraggable",
   drop:function( event, ui ) {
      console.log(".someDraggable was dropped on me");
   }
});

您的代码存在的问题是您正在尝试将两个对象相互比较。除非它们完全相同，否则它将始终返回false。例如：

var a = { 信：“一” }; var b = { 信：“一” };

if(a==b) {
   //will never be reached as even though the contents of the 
   //object match the objects themselves do not.
}

您可能需要按照我的建议去做，并使用jquery-ui用于处理这些事情的内置事件或测试两个元素的偏移对象的各个属性相互之间

//获取底层的dom元素，然后使用getBoundingClientRect（）来获取它们 //位置和大小信息 var snapRect = $（'。snap1'）[0] .getBoundingClientRect（）; var wordRect = $（'。word1'）[0] .getBoundingClientRect（）;

if( 
    (wordRect.left >= snapRect.left && wordRect.left <= snapRect.right)&&
    (wordRect.top >= snapRect.top && wordRect.top <= snapRect.bottom)
){
  console.log("word1 is within the bounds of snap1");
}

getBoundingClientRect()返回如下对象：

{
   bottom: 406.960205078125
   height: 207.8125
   left: 435.9090881347656
   right: 1103.7215576171875
   top: 199.14772033691406
   width: 667.8125
}

检查所有元素是否已被删除的示例

var counter = 0;
$( ".selector" ).droppable({ 
   accept: ".someDraggable",
   drop:function( event, ui ) {
      counter++;
      //check that counter is equal to the number of .someDraggable elements on the page.
      if(counter == $('.someDraggable').length){
         console.log("all .someDraggable elements were dropped on me");
      }
   }
});

jQuery .offset if语句

2 个答案: