jQuery 拖放问题 - div id 和 class 相关

Question

我有两个可拖动的图像，1 个男人和 1 个女人。当我将这个人拖到两个 div 之一时，我想隐藏那里的图像并显示一个新的特定图像。当我将女人拖到同一个 div 时，我想隐藏现有图像并显示单独的不同图像。

上面的例子有两个独立的 div。两个可拖动的图像到两个单独的 div 中。传入的图像将决定隐藏什么和显示什么。到目前为止，我的代码在下面。它不工作。我知道 && 不合适。

    $('#drag-woman').draggable({helper:'clone'});
$('#drag-man').draggable({helper:'clone'});  // makes top images draggable

$("#drop-area-contain").droppable({  //makes contents in div droppable
  drop: function(e, ui) {
    if((ui.draggable.attr("id")) == 'drag-woman') && (class == "quid-contain"){  //if id is dragged do this

       $('.quid-empty').hide();
       $('.quid-with-woman').show();

    }else if((ui.draggable.attr("id")) == 'drag-woman') && (class == "hostile-contain"){  // else if dragged do this

       $('.hostile-empty').hide();
       $('.hostile-with-woman').show();

    }else if((ui.draggable.attr("id")) == 'drag-man') && (class == "quid-contain"){  // else if dragged do this

       $('.quid-empty').hide();
       $('.quid-with-man').show();

    }else if((ui.draggable.attr("id")) == 'drag-man') && (class == "hostile-contain"){  // else if dragged do this

       $('.hostile-empty').hide();
       $('.hostile-with-man').show();

    }
  }
});

JSFIDDLE

Answer 1

修复了 JSFiddle 中的语法错误。

$('#drag-woman').draggable({helper:'clone'});
$('#drag-man').draggable({helper:'clone'});  // makes top images draggable

$("#drop-area-contain").droppable({  //makes contents in div droppable
  drop: function(e, ui) {
    if(((ui.draggable.attr("id")) == 'drag-woman') && ($(this).hasClass("quid-contain"))){  //if id is dragged do this

       $('.quid-empty').hide();
       $('.quid-with-woman').show();

    }else if(((ui.draggable.attr("id")) == 'drag-woman') && ($(this).hasClass("hostile-contain"))){  // else if dragged do this

       $('.hostile-empty').hide();
       $('.hostile-with-woman').show();

    }else if(((ui.draggable.attr("id")) == 'drag-man') && ($(this).hasClass("quid-contain"))){  // else if dragged do this

       $('.quid-empty').hide();
       $('.quid-with-man').show();

    }else if(((ui.draggable.attr("id")) == 'drag-man') && ($(this).hasClass("hostile-contain"))){  // else if dragged do this

       $('.hostile-empty').hide();
       $('.hostile-with-man').show();

    }
  }
});

https://jsfiddle.net/svz0bax5/

编辑

我在 if 和 else if 部分的条件的括号中添加了结尾。此外，不是比较不存在的 class 变量 .hasClass() 被调用。

编辑2

简化的 if-else：

$('#drag-woman').draggable({helper:'clone'});
$('#drag-man').draggable({helper:'clone'});  // makes top images draggable

$("#drop-area-contain").droppable({  //makes contents in div droppable
  drop: function(e, ui) {
    var idArray = ["drag-woman", "drag-man"];
    if((idArray.indexOf(ui.draggable.attr("id")) + 1) && $(this).hasClass("quid-contain")) {  //if id is dragged do this

       $('.quid-empty').hide();
       $('.quid-with-' + this.id.substring(5)).show();

    }else if ((idArray.indexOf(ui.draggable.attr("id")) + 1) && $(this).hasClass("hostile-contain")){  // else if dragged do this

       $('.hostile-empty').hide();
       $('.hostile-with-' + this.id.substring(5)).show();
    }
  }
});

编辑3

在新的fiddle中：https://jsfiddle.net/1btx6rfp/

可以看到解决方法：

$('#drag-woman').draggable({helper:'clone'});
$('#drag-man').draggable({helper:'clone'});  // makes top images draggable

$(".quid-contain, .hostile-contain").droppable({  //makes contents in div droppable
  drop: function(e, ui) {
    var idArray = ["drag-woman", "drag-man"];$('#drag-woman').draggable({helper:'clone'});
$('#drag-man').draggable({helper:'clone'});  // makes top images draggable
    if((idArray.indexOf(ui.draggable.attr("id")) + 1) && $(this).hasClass("quid-contain")) {  //if id is dragged do this

       $('.quid-with-' + ui.draggable.attr("id").substring(5)).show().siblings().hide();

    }else if ((idArray.indexOf(ui.draggable.attr("id")) + 1) && $(this).hasClass("hostile-contain")){  // else if dragged do this

       $('.hostile-with-' + ui.draggable.attr("id").substring(5)).show().siblings().hide();
    }
  }
});

我们有一个简化的 if 并且正确处理了放置事件。

jQuery 拖放问题 - div id 和 class 相关

jQuery Drag and Drop issue - div id and class dependent

jquery

jquery-ui-draggable

jquery-ui-droppable