jqueryのdropとremove

jquery.pep.jsを利用して要素を動かしたり増やしたりするコンテンツを考えています。
dblclickイベントを利用して要素を削除するコードを書きましたが、タッチデバイスだと動かず、様々試しましたが断念しました。

そこで動かせる要素を、ある要素上にドロップ（いわゆるごみ箱アイコンか何かに放り込む）すると削除されるような仕組みを考えていますがうまくいきません。

html
1<!doctype html>
2<html>
3	<head>
4	<meta charset="utf-8">
5	<title>要素を動かして消す</title>
6	<style>
7	</style>
8	<script src="jquery.js"></script>
9	<script src="jquery.pep.js"></script>
10	<script src="pepTest.js"></script>
11	
12	<link rel="stylesheet" href="test.css">
13	<script type="text/javascript">
14	$(document).ready(function(){
15	$('#test').pep({ constrainTo: 'window' });
16	});
17	</script>
18	</head>
19	<body>
20	<img id="test" src="kurosiba.jpg" width="200px" style="position: absolute; top:640px;right:50px;">
21	<div id="DropA">ここにドロップ</div>
22	</body>
23
24</html>

二つのコードを考えてみましたが、エラーは出ませんが期待の動きもしません。
なにが悪いかご指摘いただけるとありがたいです。

試行１

javascript
1function deleteTest(){
2	$('#dropA').ondrop(function(){
3		$('#test').remove();
4	});
5}

試行２

javascript
1$(function(){
2	$('#dropA').on("drop",function(e){
3		$('#test').remove();
4	});
5});

ご覧の通り初心者ですので文法的な間違いや、学ぶ方向性に問題があるかもしれません。ご容赦ください。

編集依頼を受けて目を通してみましたが、ちょっと行き詰ってしまいました。

javascript
1$(document).ready(function(){
2        $('#test').pep({
3          droppable: "#DropA",
4          overlapFunction: false,
5          useCSSTranslation: false,
6        });
7      });

で、サンプルでは受けるDropAのcssが変化することは確認できました。
結論から言うと受ける側ではなく入れる側の#testをremoveしたいのですが、そもそもどこに当たり判定がありどの仕組みでcssの書き換えをしているのかさっぱりわかりません・・・。オプションがあるのでしょうか。
ヒントだけでも良ければお願いします。

これか！と思ったけど無反応だったコードも載せておきます。
overlapFunction: function(){$('.pep').remove},

kszk311

2018/03/26 02:46

demoは見ましたか？もし見ていなければ、一度目を通してください。一番参考になるのは、「droppable.html」だと思います。

kszk311

2018/03/26 02:49

「#DropAにドロップされた」と検知するのは、jQuery搭載の「drop」ではなく、pep.jsに組み込まれているやり方でできます。

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

回答1件

ベストアンサー

こんな感じで想定している動作になりませんかね。
droppable.htmlだけじゃ足りなかったかも知れません、すみません。

html
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>要素を動かして消す</title>
6<style>
7</style>
8<script src="jquery.js"></script>
9<script src="jquery.pep.js"></script>
10<!--<script src="pepTest.js"></script>-->
11<!--<link rel="stylesheet" href="test.css">-->
12<script type="text/javascript">
13/*$(document).ready(function(){
14	$('#test').pep({ constrainTo: 'window' });
15});*/
16$(function(){
17//$(document).ready(function(){
18	$('#test').pep({
19		droppable: '#DropA',
20		overlapFunction: false,
21		useCSSTranslation: false,
22/*		drag: function(ev, obj){
23				console.log(ev);
24				console.log(obj.activeDropRegions);
25			},
26*/
27		//マウス離した時
28		stop: function(ev, obj){
29			if(obj.activeDropRegions.length > 0){
30				$(ev.target).remove();
31			}
32		}
33	});
34});
35</script>
36</head>
37<body>
38	<img id="test" src="https://placehold.jp/150x150.png" width="200px" style="position: absolute; top:640px;right:50px;">
39	<div id="DropA">ここにドロップ</div>
40</body>
41</html>

投稿2018/03/26 15:48

kszk311

総合スコア3404

kihokutarou

2018/03/26 23:06

なるほど！stop使ってその時の位置を判定するんですか、なるほどなるほど。 $(document).ready(function(){ $('#test').pep({ droppable: "#Drop", revert: true, revertIf: function(){ return //ここに処理を書きたい・・・ }, と考えていましたが、スマートな方法があるのですね。本当に助かりましたし、obj.activeDropRegions.lengthの意味も理解できて今後に生かせそうです。ありがとうございました。

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