Draggable не помещается в droppable при перетаскивании назад

Я новичок в плагине Draggable and Droppable. Вот кодовая ссылка моего приложения http://codepen.io/anon/pen/qEMVwE

Вот как это работает: 1. Мы можем перетащить элемент div (синий цвет) с помощью тега <td>. 2. Мы можем поместить два элемента div в одну строку, перетащив их, и второй элемент div будет окрашен в красный цвет.

Вот моя проблема: когда я перетаскиваю div (красный цвет) в любой пустой столбец, его атрибут left не меняется. Он не вписывается в ряд, он выходит за пределы ряда.

классы drop и drag должны иметь относительное и абсолютное положение соответственно, пожалуйста, не меняйте это.

Пожалуйста, помогите мне, это будет очень полезно для меня. Заранее спасибо.


javascript html jquery jquery-ui-draggable jquery-ui-droppable
person SiVi    schedule 08.03.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вот рабочий пример

В своем коде измените функцию handleCardDrop() следующим образом:

function handleCardDrop( event, ui ) {   
    if( $(this).children('.drag').length <2){
            $(ui.draggable).css({"top": "1px" ,"left":  0 }).appendTo(this);
            var apptValue = dataAppt.attr("data-appt");
            apptValue -= 1;
            dataAppt.attr("data-appt", apptValue);
            if( ($(this).attr("data-appt")) == 1){
                 $(this).attr("data-appt","2");
            }
            else{
                $(this).attr("data-appt","1");
            }
            ui.draggable.draggable( 'option', 'revert', false ); // move this outside the if/else so it gets applied in all cases
            resetAppointment();
            }
    else{
        alert('Only Two allowed!!!');   
    }

 }

Кроме того, измените свою функцию resetAppointment() следующим образом:

function resetAppointment(){
    $('td[data-appt="2"] .drag').css("width", "45%"); // 45% not 50% since your full witdh elements are only 90% not 100%
    var width = $('td[data-appt="2"] .drag').first().width();
    $('td[data-appt="2"] .drag').last().css({"left": width}); // wrap your selector string with single quotes and use double quotes inside where needed so you dont have to escape the quotes
    $('td[data-appt="1"] div.drag').css({"width": "90%", "left" : "0px"}); // i use px explicitly here because if I dont, I'll always forget to add it later when I change this to 10 or something
}
person Wesley Smith    schedule 08.03.2015
comment
Спасибо большое... вы молодцы...:):) - person SiVi; 09.03.2015
comment
Но $(this).draggable( 'option', 'revert', false ); это должно быть "правда", я забыл ввести $(this).draggable( 'option', 'revert', false ); этот код в оставшейся части функции handleDrop()... - person SiVi; 09.03.2015
comment
Ах, да, перемещение ui.draggable.draggable( 'option', 'revert', false ); за пределы if/else, чтобы оно применялось во всех случаях, устраняет проблему. Я обновил пример и свой ответ. Рад, что помогло :) - person Wesley Smith; 09.03.2015