これを前置きするために、このようなことを達成する方法に関するベストプラクティスに関するこの質問に対する一般的な回答と、私の特定の質問に対する可能な回答を得ることができることを願っています?
私は「あなたが人間であることを証明する」プラグインに取り組んでおり、すべてが読み込まれると機能します。バックボーンとしてjQuery UIを使用しており、ドラッグ可能およびドロップ可能を使用しています。一般的な質問: イベントでプラグインを破棄してリセットするにはどうすればよいですか? より具体的な質問は、間違ったオブジェクトをその場にドラッグした場合、すべてが破壊された後にドラッグ アンド ドロップ機能をリセットするにはどうすればよいかということです。
以下は擬似コードです。
(function($){
$.fn.robotProof = function(options){
var defaults = {
//Default variables
}
var options = $.extend(defaults, options);
return this.each(function(defaults){
/* Here I style the elements because they were not styled by a CSS
Then I randomly assign the elements a spot and append them to the container
Then I use Draggable and Droppable */
$('.peg').draggable({
drag: function() {
/* Drag Function Here */
},
revert: 'invalid'
});
$('.hole').droppable ({
accept: '.valid',
drop: function(){
var username = $('#username').val();
var email = $('#email').val();
var password = $('#password').val();
if(!username || !email || !password){ //IF ONE OF THE INPUTS IS EMPTY
$('.hardError').html("You've forgotten something").slideDown(300);
//////* THIS IS WHERE I NEED TO DESTROY/RESET THIS PLUGIN *//////////
} else {
$('.valid').animate({left: "286px",top: "1px"});//success
}
}
});
};
})(jQuery);
$(document).ready(function(){
$('.robotProof').robotProof();
});
ドロップ可能なコードで、エラー (これは最終的にすべてのエラーになります) で確認できます。プラグインをリセットできるようにする必要があります。
私は、関数を再度呼び出すことができるように、コードのほぼ全体を関数にする必要があると感じています (そして、このアイデアで遊んでいます)。私がそれを試したとき、コードをネストする必要がありました。なぜなら、それらの要素を関数にも入れない限り、要素を再びドラッグ可能にすることができないためです。そのように動作しません。
私は以前にいくつかの成功したプラグインを作成しましたが、これはすべてのプラグインで私が持っていた質問です. これのすべてのインスタンスを破棄し、ページを更新せずにプラグインをリセットするにはどうすればよいですか?