拖回时，Draggable 不适合 droppable

Question

我是 Draggable and 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
}

拖回时，Draggable 不适合 droppable

Draggable is not fit into droppable when dragged back

html

javascript

jquery

jquery-ui-draggable

jquery-ui-droppable