2

私はjQueryを使用してdraggableおりdroppable、コンテンツ要素をページ要素にドロップするために:

<h2>Page</h2>

<div id='page-content'>

</div>

<div id='content-elements'>
  <div id='text-element' class='content-element'>Text</div>
  <div id='date-element' class='content-element'>Date</div>
</div>​

ドラッグ可能の私の JS は次のようになります。

$elements.draggable({
  revert: true
});

そこにある理由はrevert、コンテンツ要素を要素のリストに戻し、「複製」をページに追加したいからです。

ドロップ可能にこのjsを使用してこれを実行しようとしました(coffeescriptを使用して作成):

$('#page-content').droppable({
  drop: function(event, ui) {
    var $element, $me;
    $me = $(this);
    $element = $(ui.draggable);
    console.log($element.clone(false));
    return $element.clone().appendTo($me);
  }
});

これが行うことは、ドラッグされた ui 要素を取得し、それを複製してページに追加しようとすることです。

ただし、これは機能しません。ui.draggableからdivなどを取得できますが。

問題を説明するために jsfiddle を作成しました: http://jsfiddle.net/sw4Gc/2/

なぜああなぜ？

4

1 に答える 1

5

要素が相対的な位置にあり、要素の外にある状態で複製されました。要素のスタイルを削除する必要があります: 

var $newElement = $element.clone();
$newElement.attr('style', '');
$newElement.appendTo($me);
于 2012-11-19T11:20:15.323 に答える