jQuery UIで画像の上に画像をドロップする際に、cloneを使うとうまくいかない。

jQuery UIで画像の上に画像をドロップするのはうまくいくんですが、
同じ画像を別の位置にドロップしようと、cloneを使うとうまくいかなくなります。
やりたいことは別の位置にも画像をドロップしたいということです。

手軽にうまくいっている状況と、そうでない状況を見られるように、下記を準備しました。 http://provisional.ebb.jp/teratail01.html ←画像１つだとうまくいく。
http://provisional.ebb.jp/teratail01bad.html ←cloneするとうまくいかない。

両者で違うのは、42行目の
helper:'clone'
のみです。

どこが間違っているかご指摘ください。よろしくお願いします。

JavaScript、jQuery、jQuery
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>Drag and Drop</title>
6  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
7  <style>
8  body {
9    background:#ddd;
10  }
11  #chart {
12    position:relative;
13  }
14  .fig {
15    position:absolute;
16    left:50px;
17    cursor:pointer;
18  }
19  #fig1{
20    left:50px;
21  }
22  </style>
23</head  >
24<body>
25<!-- http://provisional.ebb.jp/teratail01.html でこのデモが見れます。
26     http://provisional.ebb.jp/teratail01bad.html がうまくいかない状況です。 -->
27<img src="http://provisional.ebb.jp/img/sample_boy.png" id="chart" class="chart">
28<br>
29<img src="http://provisional.ebb.jp/img/fig1.png" class="fig" id="fig1">
30<br><br>
31
32<br>X: <label id="x"></label>
33<br>Y: <label id="y"></label>
34<br><br>
35
36<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
37<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
38<script>
39$(function(){
40  $('.fig').draggable({
41    containment: '#chart',
42    helper:'clone',
43    opacity: 0.5,
44    stop: function(event, ui){
45      var fpx = ui.position.left;
46      var fpy = ui.position.top;
47      $('#x').text(fpx);
48      $('#y').text(fpy);
49    }
50  });
51
52  $('.chart').droppable({
53    accept: '.fig',
54    tolerance: 'fit',
55    drop: function(event, ui){
56      ui.draggable.clone().appendTo($('#fig1'));
57    }
58  });
59});
60
61</script>
62</body>
63</html>

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

回答1件

まず、img要素は空要素なので何かを入れることはできません(両サンプルとも)。何かコンテナに入れるようにしてください。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/img

そして、cloneすることでidが重複する問題が起こっています。

投稿2018/06/18 04:30

x_x

総合スコア13749

OzakiT

2018/06/19 06:49

貴重なご指摘、ありがとうございます。 imgタグをコンテナに入れるようにして、cloneによるidの重複を回避するため、配列を利用すればいいのだろうと考え、試行錯誤の途中です。 JavaScriptのConsoleとElementsを参考に、頑張ってみます。ドラッグした際に、ui-draggableやui-draggable-handleのクラスが追加されるので、そのあたりが原因かと考えています。再度、基本から学習する必要があると実感しました。またご指摘やご示唆などありましたら、よろしくお願いします。ありがとうございました。

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