1

ここにフィドルがあります：http://jsfiddle.net/adMXj/

小さなコンテナーにドロップする必要がある大きなドラッグ可能なアイテムがあります。これは、コンテナーとアイテムが同じようなサイズの場合は問題ありませんが、ドラッグ可能な要素が大きい場合には適していません。

ドラッグすると、ドラッグ可能なコンテンツを「選択したアイテム」に変更したいと思います。

手伝ってくれますか？

ここで試してみて、クリックしてドラッグするドラッグ可能なアイテムの場所に応じて、ドロップ可能な領域がどれほど小さいかを確認してください。

ここに画像の説明を入力

ここに私のJSがあります：

$('.items > li').draggable({
    revert: "invalid",
    helper: function(event) {
        var helperList = $('<ul class="draggable-helper">');
        if ($(this).is('.active')){
            helperList.append($(this).siblings('.active').andSelf().clone());
        } else {
            helperList.append($(this).clone());
        }
        return helperList;
    }
});

$('.drop-containers li').droppable({
    drop: function(event, ui) {
        console.log('dropped');
        var $this = $(this);
        var selectedObjects = new Array();
        if (ui.draggable.hasClass('active')) {
            console.log('active');
            // get all active items
            $('ul.items > li.active').each(function() {
                console.log($(this).attr('id'));
                selectedObjects.push($(this).attr('id'));
                $(this).remove();
            });
        } else {
            console.log('not active');
            selectedObjects.push(ui.draggable.attr('id'));
            ui.draggable.remove();
        }
        $this.append(', ' + selectedObjects.join(', '));
    }
});
4

2 に答える 2

2

ドロップ可能なアイテムの許容範囲を変更することで、この問題に対処しました。

$('.drop-containers li').droppable({
  tolerance : 'pointer'
});

許容範囲を変更することは良い解決策であるため、ドラッグされたオブジェクトやドロップ可能なオブジェクトの外観を変更する必要はありません。ドラッグ可能なアイテムを簡単にドロップしたい場合は、許容範囲を「ポインター」または「タッチ」に変更します

Tolerance は、ドラッグ可能オブジェクトがドロップ可能オブジェクトの上に置かれているかどうかをテストするために使用するモードを指定します。可能な値:

  • "fit": Draggable は Droppable と完全に重なります。
  • "intersect": (デフォルト) ドラッグ可能なものはドロップ可能なものと両方向で少なくとも 50% オーバーラップします。
  • "pointer": マウス ポインターがドロップ可能オブジェクトに重なっています。
  • "touch": Draggable は Droppable に任意の量オーバーラップします。

http://api.jqueryui.com/droppable/#option-tolerance

于 2013-04-30T22:32:31.577 に答える
2

完全にはわかりませんが、これがあなたの目的だと思います。これをチェックしてください：http://jsfiddle.net/XuZvA/1/

ドラッグ イベントを使用してオブジェクトを変更していhelperます。

于 2013-04-30T22:42:24.527 に答える