jQuery Drag and Drop проблема - Div ID и класс зависит - PullRequest
Новая
       34

jQuery Drag and Drop проблема - Div ID и класс зависит

0 голосов
/ 25 января 2019

У меня есть два перетаскиваемых изображения: 1 мужчина и 1 женщина.Когда я перетаскиваю мужчину в одно из двух делений, я хочу скрыть изображение, которое там есть, и показать новое конкретное изображение.Когда я перетаскиваю женщину в тот же самый 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

1 Ответ

0 голосов
/ 25 января 2019

Исправлены синтаксические ошибки в 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/

EDIT

Я добавил закрытие к параграфам для условий в частях if и else if. Также вместо сравнения вызывается несуществующая class переменная .hasClass().

EDIT2

Упрощенный 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();
    }
  }
});

EDIT3

В новой скрипке: 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 обрабатывается правильно.

...