draggable表にのみドラッグでき、他のdraggable要素にはドラッグできないようにしたい

Question

scopeなどをいろいろ試してもうまく行きませんでした。

<div class="draggable">
  <p>ドラッグ要素</p>
</div>
<div class="draggable">
  <p>ドラッグ要素</p>
</div>
<table>
  <tr>
    <th class="table"></th>
    <th class="table"></th>
    <th class="table"></th>
    <th class="table"></th>
    <th class="table"></th>
  </tr>
  <tr>
    <td class="table"></td>
    <td class="table"></td>
    <td class="table"></td>
    <td class="table"></td>
    <td class="table"></td>
  </tr>
</table>

$(function() {
  $(".draggable").draggable({ revert: "invalid", snap: ".table", snapMode: 'inner', }).droppable({});
  $(".table").droppable({
    drop: function (e, ui) {
      let $srcObj = $(ui.draggable[0]);
      $srcObj.offset($(this).offset());
      return false;
    },
  });
});

.table{
  height: 200px;
  background-color: limegreen;
  width: 200px;
  outline: 1px solid blue;
}
.draggable{
  width: 200px;
  height: 200px;
  background-color: red;
  display: inline-block;
  position: relative;
  top: 0;
}

現状だと二つの赤を重ねることができてしまいます。

わかる方いらっしゃいましたら、よろしくお願いいたいします。

Comments

[yambejp]

HTMLは例示できますか？

[annaPanda]

hamlになってましたね、すみません。
haml→HTMLの変換ツールがすぐに見つからなかったので手作業で変換しましたが、おそらく大丈夫だと思います。

[annaPanda]

haml→HTMLの変換、問題なく動作すること確認いたしました。

[yambejp]

よくわからないので想像で回答つけておきました

Answer 1

ちょっと状況がわかりませんが、jQuery-ui使っていいみたいなので
こんな感じでたとえばクラスをつかって制限したりします

• codepen

Comments

[annaPanda]

お、ありがとうございます、　まさにこれです。
ちなみに、
"hoverClass":'imgover',と "accept": '.dragItem',がなくても動作するのですが、必須ですか？

[yambejp]

いろいろ拡張しながら書いてるソースの抜粋なので
よけいなデータがついているかもしれませんね
不要なものは適当にはずしちゃってください

hoverClassがないと、いまどこに落とそうとしているという
色がつかないと思いますが・・・

[annaPanda]

なるほど、
ちなみにドラッグ要素がテーブルの一つの枠より大きい場合に、ドロップしてもテーブルの枠のサイズが変わらないようにしようとすると、この子要素にするやり方では難しいですかね？
https://gyazo.com/939df696ac5c1804be148c541522d0c5

[yambejp]

> テーブルの枠のサイズが変わらない

・ドロップしたものを小さく表示
・オーバーフローしたところを表示しない
・その他

どうすればいいのでしょうか？

[annaPanda]

本当に親切にありがとうございます。
オーバーフローしたところを表示して隣にも重なった状態を作りたいです。
レストランのテーブル予約の帯を作っていて、１席2.5時間です。でも開始時間は0.5時間単位で取れます。
同じ席に別の予約は重なってとれません。これをつくりたいんです。。。

[yambejp]

.tableのwidthを200pxとするなら
max-width:200pxも指定してやればいいですよ

[annaPanda]

なるほど、
でもこれだと隣のtdであると重なれてしまうんですよね。
https://gyazo.com/2d22fd29d1075b8baef78285d3a61d0e
tableにidを振って1をプラスしたidにも重なれないようにとか考えましたが、うまくゆきません。。。