jquery - 使用 JQuery 让用户将文本拖放到特定的 DIV 中

Question

所以，基本上我正在尝试使用可拖动和可放置功能来创建它。它的javascript是这样的：

$(init);

function init() {
    $('#HeaderDrag').draggable({
        cursor: 'move',
        revert: true,
        containment: '#Content2'
    });

    $('#header').droppable({
        accept: '#HeaderDrag',
        drop: handleDropEvent

    });
}
function handleDropEvent(event, ui) {
    var draggable = ui.draggable;
}

DIVS：

    <div id="HeaderDrag"> Header </div>
    <div id = "header">drop me here</div>

我可以拖动名为“HeaderDrag”的 div，但是当我尝试将其放到 div“header”上时，它不起作用，“HeaderDrag”只是恢复到原来的位置。我怎样才能让它工作，以便它成功地放到 div“标题”上，但不能放到我将来可能创建的其他 div 上，只放到名为“标题”的 div 上。

Answer 1

我不确定你想要发生什么，但我的尝试是：

$('#HeaderDrag').draggable({
    cursor: 'move',
    revert: true
});

$('#header').droppable({
    accept: '#HeaderDrag',
    drop: handleDropEvent
});

function handleDropEvent(event, ui) {
    $(this).append($('#HeaderDrag'));
}

JSFiddle：http: //jsfiddle.net/kW3TB/