ドラッグ&ドロップがコピーアンドペーストになってしまう

お願い

現在ドラッグアンドドロップの勉強をしています。
ドラッグ&ドロップでDOMの移動を実装しようとしたところ、下記について困っています。
どうすれば良いかご教示いただけませんでしょうか？
よろしくお願いいたします。

実現したいこと

何をしたいか
jQueryを使わず、ドラッグアンドドロップによるパーツの並び替えを実装をしたい。
参考サイトを見てみると、clickした要素にdarggable=trueを付与するだけで移動、並び替えをしています。
id,data属性を付与せずにdndを実装する方法はありませんでしょうか？

何のためにしたいか
下記参考サイトの簡易版を作成したい。
参考: pingendo https://v40.pingendo.com/new

参考サイトでは、
パーツパレットからiframeへパーツをdndしてモックアップを作成することができます。
パーツパレットからの移動だけでなく、ドロップ後、iframe内でもパーツの移動、並び替えができます。

私が実現したいのは後者の、選択したパーツの移動ができる実装をしたいです。

困っていること

パーツの移動をしたいが、コピーペーストになっている

調べたこと

パーツ移動の実装方法は

dragイベントでdrag元のidをdataTransfer.set('text', drag元のid)する
dropイベントでdocument.getElementById(drag元のid)をしてappendChildする。

上記の実装ではできない理由

今回は１つのページに同じパーツが複数ある想定なので、idでの取得はできない。

試したこと

自分の実装jsfiddle　https://jsfiddle.net/juubee/6v3xfd76/

insidednd.js

js:insidednd.js
1const textToNode = (htmlString) => {
2  let tempDiv = document.createElement('div');
3  tempDiv.innerHTML = htmlString.trim();
4
5  return tempDiv.firstChild; 
6  
7}
8
9const documentBody = document.body;
10
11documentBody.onclick = (e) => {
12  e.target.setAttribute('draggable', true);
13};
14
15documentBody.ondragstart = (e) => {
16  console.log("Drag Started");
17  const insertingHTML = e.target.outerHTML;
18  e.dataTransfer.setData("Text", insertingHTML);
19};
20
21documentBody.ondragend = (e) => {
22  console.log("Drag End");
23};
24    
25documentBody.ondragover = (e) => {
26  // console.log('Dragover');
27  e.preventDefault();
28  e.stopPropagation();
29};
30        
31documentBody.ondrop = (e) => {
32  console.log('Drop event');
33  e.preventDefault();
34  e.stopPropagation();
35  
36  const htmlString = e.dataTransfer.getData('text');
37  const node = textToNode(htmlString);
38  
39  e.target.appendChild(node);
40};
41

dnd.html

html:
1<html lang="ja">
2
3<head>
4  <meta charset="utf-8">
5  <meta content="IE=edge" http-equiv="X-UA-Compatible">
6  <meta content="" name="description">
7  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
8  <title>HTML5 dnd</title>
9  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
10  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
11  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
12  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
13
14</head>
15
16<body>
17  <div class="container">
18    <div class="row" >
19      <div class="col-12" >
20        <header >
21          <nav class="navbar navbar-expand-lg navbar-light bg-light">
22            <a class="navbar-brand" href="#">Navbar</a>
23            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
24            <span class="navbar-toggler-icon"></span>
25          </button>
26
27            <div class="collapse navbar-collapse" id="navbarSupportedContent">
28              <ul class="navbar-nav mr-auto">
29                <li class="nav-item active">
30                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
31                </li>
32                <li class="nav-item">
33                  <a class="nav-link" href="#">Link</a>
34                </li>
35                <li class="nav-item dropdown">
36                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
37                  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
38                    <a class="dropdown-item" href="#">Action</a>
39                    <a class="dropdown-item" href="#">Another action</a>
40                    <div class="dropdown-divider"></div>
41                    <a class="dropdown-item" href="#">Something else here</a>
42                  </div>
43                </li>
44                <li class="nav-item">
45                  <a class="nav-link disabled" href="#">Disabled</a>
46                </li>
47              </ul>
48              <form class="form-inline my-2 my-lg-0">
49                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
50                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
51              </form>
52            </div>
53          </nav>
54        </header>
55      </div>
56    </div>
57    <div class="row" >
58      <div class="col-9" >
59        <div class="row" >
60          <div class="col-6" >
61            <div class="table-responsive" >
62              <table class="table table-bordered table-striped mb-3 small">
63                <thead>
64                  <tr>
65                    <th scope="col">Component</th>
66                  </tr>
67                </thead>
68                <tbody>
69                  <tr>
70                    <td class="align-middle p-0"><a href="project-show.html"><img class="mr-3" data-src="holder.js/80x60?theme=noimage" width="80" height="60" alt=" [80x60]" style="width: 80px; height: 60px;" >Component</a></td>
71                  </tr>
72                  <tr>
73                    <td class="align-middle p-0"><a href="project-show.html"><img class="mr-3" data-src="holder.js/80x60?theme=noimage" width="80" height="60" alt=" [80x60]" style="width: 80px; height: 60px;" >Component</a></td>
74                  </tr>
75                  <tr>
76                    <td class="align-middle p-0"><a href="project-show.html"><img class="mr-3" data-src="holder.js/80x60?theme=noimage" width="80" height="60" alt=" [80x60]" style="width: 80px; height: 60px;" >Component</a></td>
77                  </tr>
78                  <tr>
79                    <td class="align-middle p-0"><a href="project-show.html"><img class="mr-3" data-src="holder.js/80x60?theme=noimage" width="80" height="60" alt=" [80x60]" style="width: 80px; height: 60px;" >Component</a></td>
80                  </tr>
81                </tbody>
82              </table>
83            </div>
84          </div>
85          <div class="col-6" ></div>
86        </div>
87      </div>
88      <div class="col-3" ></div>
89    </div>
90    <div class="row" >
91      <div class="col-12" >
92        <footer >
93          <div class="row">
94            <div class="col-sm-6">
95              <div class="card">
96                <div class="card-body">
97                  <h5 class="card-title">Special title treatment</h5>
98                  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
99                  <a href="#" class="btn btn-primary">Go somewhere</a>
100                </div>
101              </div>
102            </div>
103            <div class="col-sm-6">
104              <div class="card">
105                <div class="card-body">
106                  <h5 class="card-title">Special title treatment</h5>
107                  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
108                  <a href="#" class="btn btn-primary">Go somewhere</a>
109                </div>
110              </div>
111            </div>
112          </div>
113        </footer>
114      </div>
115    </div>
116  </div>
117  <script src="./insidednd.js"></script>
118</body>
119
120</html>

m.ts10806

2018/04/27 05:52

外部サービスを利用する場合、ソースコードは質問にも記載しておいてください。

HayatoKamono

2018/04/27 06:21

「実現したいこと」をより詳細に説明頂くことは可能でしょうか。何を何のためにしたいのか理解できませんでした。

HayatoKamono

2018/04/27 07:43 編集

「私が実現したいのは後者の、選択したパーツの移動ができる実装をしたいです。」の「後者」はその前の文章のどこからどこに係っていますか？「後者」が指す先が文章構造的に分かりづらいため、この質問においてどこまでをゴールとしているのかが分かりませんでした。

HayatoKamono

2018/04/27 07:45 編集

いずれにせよ、表題の「コピーアンドペーストではなく、移動をしたい」ということであれば、ご自身が書かれている「dropイベントでdocument.getElementById(drag元のid)をしてappendChildする。」が答えになるかと思います。idを使わない場合はクラス名なりdataアトリビュートの値で代用すれば良いかと思います。

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

回答2件

楽なのはjQuery+UIですね

css
1
2.droparea{width:200px;height:200px;}
3.dragItem{width:50px;height:50px;}
4
5.yellow{background-Color:yellow;}
6.lime{background-Color:lime;}
7.aqua{background-Color:aqua;}
8.red{background-Color:red;}
9.blue{background-Color:blue;}
10.gray{background-Color:gray;}

javascript
1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
3<script>
4$(function() {
5  $('.dragItem').draggable({
6    "revert":'invalid',
7    "zIndex":'1000',
8  });
9  $('.droparea').droppable({
10      "hoverClass":'gray',
11      "accept": '.dragItem',
12      "drop": function(e, ui){
13        ui.draggable.prependTo(this).css({top:'0',left:'0'});
14      },
15    });
16});
17

HTML
1<div class="droparea yellow">
2<div class="dragItem red">item1</div>
3<div class="dragItem blue">item2</div>
4</div>
5<div class="droparea lime"></div>
6<div class="droparea aqua"></div>

投稿2018/04/27 06:23