0

私はjQueryとUIが初めてです..

jQuery と jQuery UI で DOM オブジェクトのドラッグ & ドロップ & クローン & DB への保存プロセス全体が理解できません。

私はいくつかの奇妙な状況を得ました：

ヘルパー クローンはまったく機能しません。

次のコードでdivは、クローンではなく元のドラッグが行われます。

<!doctype html>
<html lang="en">
<head>

<style>
#makeMeDraggable { float: left; width: 100px; height: 100px; background: red; }
#makeMeDroppable { float: left; left: 0px; width: 300px; height: 300px; border: 1px solid #999; }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<script type="text/javascript">

$( init );

function init() {
  $('#makeMeDraggable').draggable( {
    revert:"invalid", 
    help:'clone',
    containment:"#makeMeDroppable"
  });

  $('#makeMeDroppable').droppable( {

    drop: handleDropEvent
  } );
}

function handleDropEvent( event, ui ) {
  var draggable = ui.draggable;

//  console.log( 'The square with ID "' + draggable.attr('id') + '" was dropped onto me!' );
}

</script>

</head>
<body>

<div id="content" style="height: 400px;">

  <div id="makeMeDraggable"> </div>
  <div id="makeMeDroppable"> </div>

</div>

</body>
</html>

そして、それは "help:'clone'" では なく "helper:'clone'" です。

「helper:'clone'」が機能しない...

http://jsfiddle.net/JEdtX/6/で確認できます。

私のコードで何が起こっていますか? （実際には、インターネットからソースを取得しています..）

4

1 に答える 1

0

ではhelper: 'clone'、実際には<div>要素のクローンを作成しています。お気に入りの DOM インスペクター (Firebug、Chrome 開発者ツールなど) で確認できます。要素にコンテンツを追加してみてください。

.ui-draggable-draggingクローンが空であっても表示したい場合は、クラスに css (背景色など) を追加できます。

于 2013-11-03T11:53:01.467 に答える