jQuery UIで画像の上に画像をドロップするのはうまくいくんですが、
同じ画像を別の位置にドロップしようと、cloneを使うとうまくいかなくなります。
やりたいことは別の位置にも画像をドロップしたいということです。
手軽にうまくいっている状況と、そうでない状況を見られるように、下記を準備しました。 http://provisional.ebb.jp/teratail01.html ←画像1つだとうまくいく。
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>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/06/19 06:49