Question

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

的代码

这是它的工作原理， 1.我们可以在<td>标签中拖动div元素（蓝色）。我们可以通过拖放和第二行将两个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
}

拖回时拖拽不适合放置

1 个答案: