拖回时可拖动的不适合放置

Question

我是 Draggable 和 Droppable 插件的新手。这是我的应用程序的codepen lin http://codepen.io/anon/pen/qEMVwE

这就是它的工作原理， 1.我们可以拖动<td>标签中的div元素（蓝色）。 2.我们可以通过拖放和第二个将两个div放在同一行 div 将被着色为红色。

这是我的问题，当我将div（红色）拖回任何空列时，其left 属性没有改变。它不适合在行外的行。

drop 和 drag 类必须分别位于相对位置和绝对位置，请勿更改。

请帮助我，这对我很有帮助。提前致谢。

Answer 1

这里是a working example

在您的代码中，像这样更改您的 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
}