YUI を使用して、ドラッグ ドロップのサポートを div に追加しています。クリックにも反応します。残念ながら、クリック動作はドラッグ ドロップ操作の後でも有効になります。コード スニペットを次に示します。
// Create a DOM object for the group tag.
div = document.createElement('div');
div.className = 'group';
div.onclick = function() { beginEditName(); }
container.appendChild(div);
// Enable drag/drop for the group tag.
dragdrop = new YAHOO.util.DD(div);
dragdrop.scroll = false;
dragdrop.on('dragEvent', function(ev) { onDrag(ev); });
dragdrop.on('endDragEvent', function(ev) { onEndDrag(ev); });
dragdrop.setXConstraint(0,0);
クリックはテキストを編集することになっていますが、ドラッグドロップはタグを移動することになっています。ただし、タグが移動された後にテキスト編集が開始されるように、onclick イベントが発生しています。
問題を回避するコードを作成できますが、単純なクリックとドラッグ ドロップを区別する、より直接的な YUI の方法はありますか?