1

したがって、基本的には、ドラッグ可能およびドロップ可能な機能を使用してこれを作成しようとしています。そのための 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にのみドロップします。

4

1 に答える 1

0

あなたが何をしたいのか正確にはわかりませんが、ここで私の試み：

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

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

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

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

于 2013-05-13T23:09:54.787 に答える