2012-03-01 38 views
2

ドラッグ・アンド・ドロップのためのjavascriptコードをdojoを使って書く必要があります。私に同じコードを含むリンクを提供してください。 1つのコンテナからのアイテムを別のコンテナにアイテムにドロップできるという単純な機能がほしいだけです。装飾はありません。私はそれをゴーグルしましたが、それを正しくしません。Dojoドラッグ・アンド・ドロップ

+0

あなたはJavascript OR Javaを意味しますか? JSPは実際にJavaServerPagesを表しています。これはjavascriptと同じではありません。 –

答えて

5

を見てみましょうここでは例です:あなたはこのようにそれを行うことができ、ULの内側にドラッグ&ドロップ李さんにしたい場合: HTML:

<ul id="list"> 
    <li class="dojoDndItem">content</li> 
    <li class="dojoDndItem">content</li> 
    <li class="dojoDndItem">content</li> 
</ul> 

はJavaScript:

dojo.require("dojo.dnd.Source"); 

dojo.addOnLoad(function(){ 
    new dojo.dnd.Source("list"); 
});​ 

それだけです。完了しました。ここにはjsfiddleの例があります:http://jsfiddle.net/xFcuB/

あなたはすべての種類の砂糖を中に入れることができます。ここでは多くのより多くの情報:http://dojotoolkit.org/reference-guide/dojo/dnd.html#dojo-dnd

+0

そのkoenpのおかげで..それは本当に素晴らしいです..私は1つのコンテナから特定のアイテム(画像、テキスト何か)をドラッグして別のコンテナにドロップすることができます何かを提案することはできますか?ここでは、リスト内のアイテムのみをトラバースしています。私はそれが1コンテナから別のコンテナに移動することを欲しいですか?ありがとう。 –

+0

こんにちはフィドルに感謝します。私はそれを増やして 'Target'を追加しました。 http://jsfiddle.net/xFcuB/209/ – rodvlopes

3

ここでは例です:あなたはドラッグして別の容器に1つのコンテナから削除する場合:

HTML

<div dojoType="dojo.dnd.Source" id="listNode" class="container1"> 
    <div dojoType="dojo.dnd.Source" class="dojoDndItem movableContainer">A container</div> 
    <div class="dojoDndItem">Item 1</div> 
    <div class="dojoDndItem">Item 2</div> 
    <div class="dojoDndItem">Item 3</div> 
</div> 
<br> 
<div dojoType="dojo.dnd.Source" class="container1"> 
</div> 

はJavaScript

dojo.require("dojo.dnd.Source"); 

.dojoDndItem { padding:3px; } 
.movableContainer { border: 1px solid #aaa; } 
.movableContainer div { margin-left: 5em; } 
.container1 { border-radius: 8pt 8pt 8pt 8pt; border:1px solid #aaa; padding: 1em 3em; cursor: pointer; } 
.container2 {position:inherit;border-radius: 8pt 8pt 8pt 8pt; border:1px solid #aaa; padding: 1em 3em;cursor: pointer; } 
#listNode { background: #ddd; } 

そして、あなたのdone.That magic.Hereのjsfiddle例ですされていますhttp://jsfiddle.net/V5yBs/

そして、私は、これはあなたが望むものであると思います。お楽しみください

+2

Dojo 1.9.3 +アイテムはプログラムによって作成されます:http://jsfiddle.net/V5yBs/53/ –

+2

そしてアイテムを動的に既存のソースに挿入します:http:// jsfiddle .net/V5yBs/54/ –

+0

@AnatoliyArkhipovテンプレートウィジェットにあなたのコードをどのように追加しますか?基本的にアイテムを別のウィジェットにドラッグアンドドロップしますか?私は何かが間違っていることを試みた - http://stackoverflow.com/q/37308974/1104770を参照してください – sjs

関連する問題