0

jQuery UI のドラッグ可能なプラグインを使用して、div をテーブルにドラッグしています。

私の問題は、テーブル セルにドラッグすると、ドロップ イベントがトリガーされないことがあるということです。2 つのセル (垂直または水平) を分離する 1 つのピクセルに正確にドロップすると発生するようです。境界線を 0 に設定しようとしましたが、まだ問題があります。

この単純化された例を確認してください。

4

3 に答える 3

2

動作デモ http://jsfiddle.net/YNUzx/1/ または http://jsfiddle.net/YNUzx/2/

Toleranceドラッグ機能を向上させるには、オプションをに設定する必要がありtouchます:)

または許容値として使用pointer: マウス ポインターがドロップ可能オブジェクトに重なる

よく読んでください：http://jqueryui.com/demos/droppable/#option-tolerance

動作: "1" と言ってテーブル セルにドラッグすると、タッチするとテーブル内でドロップがトリガーされます。残りはデモで確認できます。

お役に立てれば、

次の行はトリックを行います：tolerance: "touch",

コード

$(".dragbox").draggable({
    revert: true
});

$("table tr td").droppable({
    accept: ".dragbox",
    tolerance: "touch",
    drop: function(event, ui) {
        $(this).css({
            'background-color': 'white'
        }).html(ui.draggable.find('span').text());
    },
    over: function(event, ui) {
        $(this).css({
            'background-color': '#DCFFDB'
        });
    },
    out: function(event, ui) {
        $(this).css({
            'background-color': 'white'
        });
    }
});​
于 2012-06-19T10:40:05.030 に答える
1

私が提案するのは、「タッチ」許容オプションを使用することですが、適切な機能に問題が発生しているため、ドラッグ可能オブジェクトのマージンを削除することです。代わりに、ドラッグ可能なものにラッパー div を使用し、その div にマージンを与えます。これはhttp://jsfiddle.net/YNUzx/3/に役立つかもしれません

また、適切な動作を確認するために、td の幅と高さを大きくすることをお勧めします。

編集：これを試してみてくださいhttp://jsfiddle.net/YNUzx/4/私は解決策を得たと思います

于 2012-06-19T11:25:58.660 に答える
0

Tejasva Dhyani のコメントと Tats_innit とのチャットのおかげで、答えが見つかりました。

ドラッグ可能な div が 2 つのドロップ可能な要素 (セル) の間にあるときにドロップすると、jQuery は混乱します (当然のことながら)。

つまり、15px が 1 つのセルの上にあり、15px が別のセルの上にあるときにドロップすると、ドロップ イベントはトリガーされません。

私がしたことは、幅と高さを奇数に設定することだけでした。こちらの jsfiddle を参照してください。

于 2012-06-19T12:11:49.767 に答える