draggableでidを保持したまま複製する方法を教えてください

Question

HTML javascript jqueryを使用しています。

.Blockという要素をドラッグ＆ドロップで元要素を残したまま複製を作ろうと思っております。

$(".case").draggable({
connectToSortable:'.Block',
helper:'clone',
});

としていましたが、クローンしたブロックはidを所持していなかったので、
なんとかidもコピーしたいと思っています。

clone(true)にしたり
helper:function(){$(this).clone(true);}
を試しましたがエラーで実現にはいたりませんでした。

draggableでidを保持したまま複製する方法を教えてください。

Answer 1

id は重複できないので、data-id などにする必要があります。
ドラッグ開始のイベントは start です。

$(".case").draggable({
  connectToSortable:'.Block',
  helper:'clone',
  // add
  start: function(event, ui) {
    ui.helper.attr('data-id', event.target.id);
  }
});

あるいは

$(document).on('dragstart', '.case', function(event, ui) {
  ui.helper.attr('data-id', event.target.id);
});

https://api.jqueryui.com/draggable/#event-start

Comments

[shionrandou]

内容的にid重複しても問題ないかと思ったのですが、
ルールとしてidの重複はダメだったのですね。
お二方ともありがとうございます。

詳しく解決策を提示してくださったx_x様をベストアンサーとさせていただきます。

Answer 2

cloneは要素をコピーする指定ですが、html構文としては重複idはNGであるためidはコピーされない仕様だったと思います。
自身でつけ直すしかないですね。