Draggableを受け入れる要素が重なる場合に重複してドロップされる問題

いつもお世話になっております。

環境
PHP 7.1
jQuery 3.2.1
jQuery UI 1.11.1

jQuery UIを使用して、Draggable要素をSortableを実装している要素にドラッグ＆ドロップするシステム構築しております。
今回、Sortableを実装している要素(td)が重なる場合に、ドロップしてしまうと重複して配置してしまう問題がおきております。
jQuery UIのバージョンアップ以外での対処で解決したいと考えております。

解決のために、皆様のお力をお貸し頂けないでしょうか。

以下、簡易的に現象を確認するソースを載せます。
どうかよろしくお願いいたします。

PHP
1<!DOCTYPE html>
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
3<head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <meta name="format-detection" content="telephome=no" />
8    <title>テスト</title>
9    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
10    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
11    <style>
12
13        .left{
14            float: left;
15        }
16
17        .right{
18            width: 40%;
19            float: right;
20        }
21
22        #_bodyContainer{
23            padding-top: 96px;
24        }
25
26        #table1 {
27            background: gray;
28            width: 1120px;
29        }
30
31        #table1 tbody{
32            height: 100px;
33            overflow-y: auto;
34            display: block;
35        }
36
37        #table2 td{
38            z-index: 1000;
39        }
40
41        table tr{
42            height: 50px;
43        }
44
45        table td{
46            position: relative;
47            border: 1px solid;
48            width: 53px;
49            height: 10px;
50            box-sizing: border-box;
51        }
52
53        #draggableList{
54            background: #b6b6b6;
55            padding: 5px;
56        }
57
58        .person{
59            background: #feffc3;
60            width: 50px;
61            text-align: center;
62            border: 1px solid #fdd282;
63            border-radius: 9px;
64        }
65
66        .ui-state-highlight{
67            background: #5f3f3f !important;
68            width: 100%;
69            height: 30px;
70        }
71
72    </style>
73    <script>
74        $(function () {
75
76            $("table td").sortable({
77                placeholder: "ui-state-highlight",
78                zIndex : 9999,
79                helper : "clone",
80                appendTo : 'body',	// helperの親要素指定,
81                scroll: false,
82            });
83
84            $("#draggableList > .person").draggable({
85                connectToSortable: "table td",
86                helper : "clone",
87                appendTo : 'body',	// helperの親要素指定,
88                scroll: false,
89                zIndex : 9999,
90            });
91
92        });
93    </script>
94</head>
95<body>
96    <div id="_bodyContainer">
97        <div class="left">
98            <table id="table1">
99                <tbody>
100                    <?php
101                    for ($i = 0;$i <  20;$i++){
102                        ?>
103                        <tr>
104                            <?php
105                            for ($j = 0;$j <  20;$j++) {
106                                ?>
107                                <td></td>
108                                <?php
109                            }
110                            ?>
111                        </tr>
112                        <?php
113                    }
114                    ?>
115                </tbody>
116            </table>
117
118            <table id="table2">
119                <tbody>
120                <?php
121                for ($i = 0;$i <  20;$i++){
122                    ?>
123                    <tr>
124                        <?php
125                        for ($j = 0;$j <  20;$j++) {
126                            ?>
127                            <td></td>
128                            <?php
129                        }
130                        ?>
131                    </tr>
132                    <?php
133                }
134                ?>
135                </tbody>
136            </table>
137        </div>
138        <div class="right">
139            <div id="draggableList">
140                <div class="person">DRAG</div>
141            </div>
142        </div>
143    </div>
144</body>
145</html>

colling

2018/10/31 11:47

要素が重なってそこにあるのだから、当然のような気がしますが、、。間に別のdivを重ねても同じでしょうか？

colling

2018/10/31 11:57

希望の動作としては、上に２マスほど見えているグレーの部分にはドロップしたいということでしょうか？

nepia

2018/10/31 12:56

divを重ねてもダメだと思います。また、希望の動作は、重なる部分の中で、z-indexが最大の要素に配置してしたいです

colling

2018/10/31 13:36

えと、それは、こちらが聞いたこととは、同じと捉えて良いのでしょうか？

tonkun4os

2018/11/01 05:48

実際検証してませんが http://blog.diimo.net/jqui-drag-and-drop/ でドロップ終了時のイベントでstopImmediatePropagation呼んでみてはどうでしょう？

行動規範の内容に同意します

回答1件

ベストアンサー

Droppableも使っていないのでキャンセルは難しいため、いったん追加してから削除してみます。
どこかでlastItemを宣言しておき、beforeStopとreceiveとで処理します。

jQuery
1            $("table td").sortable({
2                // 略
3                beforeStop: function(event, ui) {
4                    var target = $(event.target);
5                    if (target.closest('table').prop('id') === 'table1') {
6                        lastItem = target.find('.ui-draggable-handle');
7                    }
8                },
9                receive: function(event, ui) {
10                    var x = event.clientX;
11                    var y = event.clientY;
12                    var table = $(document.elementFromPoint(x, y)).closest('table');
13                    if (!$(event.target).closest('table').is(table)) {
14                        lastItem.off().remove();
15                    }
16                }
17            });