はてなブックマーク

jQuery UI 使えば簡単にできるけど、カスタマイズしようとするとカオスになるので、自前でも実装できるようになっておきたい。 D&Dの仕様はいろいろあるけど、以下のようなものを考えてる。 これ、何気に難しいと思う。 ドラッグ時、掴んだ要素自体は動かさず、コピーを動かすこと コピーの中心は、常にマウスの位置にあること ドロップできる要素上をマウスホバーしたら、その要素をハイライトすること 実装手順 ドラッグ対象要素のmousedownイベントを検知して、その要素のコピーを作る ドラッグ可能エリア (大抵はbodyとか) のmousemoveイベントを検知して、コピーの位置を変える ドロップできる要素のmouseenter mouseleaveイベントを検知して、ハイライトのオンオフを行う ドロップ出来る要素のmouseupイベントを検知して、ドロップ成功時の処理をする ドラッグ可能エリア

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

setTimeoutを使って複雑な非同期処理を書くのは、タイマーIDの管理が大変でやりたくない。 Deferredオブジェクトならそこら辺うまいこと取り扱えるんで、よくDeferredオブジェクトでsetTimeoutをラップして使う。 $.extend({ wait: function(duration){ var dfd = $.Deferred(); setTimeout(dfd.resolve, duration); return dfd; } }); var time = +new Date(); // 1秒待つ $.wait(1000).done(function(){ console.log(new Date() - time); //=> 大体 1000 }); // 2秒たったらキャンセルする var timer = $.wait(3000).fail(function(

var Hello = (function(){ // constructor function Hello(name){ this._name = name; } // private method function say(message){ console.log(message + ', ' + this._name); } // public method function hello(){ say.call(this, 'Hello'); } Hello.prototype = { // constructor 修正 constructor: Hello, // 以下 public メソッド hello: hello }; return Hello; }()); var Animal = (function(){ function Animal(name){ this._nam