0

我有两个可拖动的图像，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

4

1 回答 1

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

在新的小提琴中：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 和 drop 事件被正确处理。

于 2019-01-25T03:25:31.543 回答