1

作为序言，我希望有可能获得关于如何完成此类事情的最佳实践的这个问题的一般答案，以及对我的具体问题的可能答案？

我一直在开发一个“证明你是人类”的插件，当一切加载时我让它工作。我使用 jQuery UI 作为它的主干，并使用 Draggable 和 Droppable。一般的问题是：如何销毁和重置事件的插件？更具体的问题是：当我将错误的对象拖到现场时，如何在一切都被破坏后重置拖放能力。

下面是伪代码：

(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();
});

您可以在可删除的代码中看到错误（最终将出现所有错误）我需要能够重置插件。

我觉得（并且已经玩过这个想法）几乎整个代码都需要成为一个函数，以便我可以再次调用该函数。当我尝试这样做时，我不得不嵌套代码，因为它不允许元素再次可拖动，除非我也将这些元素放入函数中，然后它会调用它自己的函数，我们都知道没有不能那样工作。

我之前写过几个成功的插件，但这是我在每个插件中都遇到过的问题。如何销毁所有实例，然后在不刷新页面的情况下重置插件。

4

2 回答 2

4

玩得开心。:) 看起来我有很多时间，但这就是你想要的。所以线索是用

$.fn.robotProof={}

您会看到它也可以使用完整的不同功能内容重新启动和重新启动

<script type="text/javascript">
var i=0;
(function($){
    $.fn.SelfDestroy=function(blabla){
        function init(){
            var brutal = 'mega conspirative content of your plugin :)';
            $('#report').text(brutal);
        };
        init();
        return this.each(function(){
           $('#counter').text('ding dong'+i).show().fadeOut(200);
           i++;
           $(this).text(blabla);
        });
    };
    $.fn.Destroy=function(){
        // lets overwrite the jQuery plugin function
        $.fn.SelfDestroy={};
    };
    $.fn.Rebuild=function(){
        // here we load other work in the same namespace as before
        $.fn.SelfDestroy=function(ZoroZonk){
           if (ZoroZonk=='push to test if stil running') 
           $('#report').text('my name is bond, james bond').show().fadeOut(100).fadeIn(100);
        };
    };
})(jQuery);
$(document).ready(function(){
   $('#bomb').on('click',function(){
       $().Destroy();
       $().Rebuild();
   });
   $('#report').SelfDestroy('huaaa! time to run! but stil original function work');
});
</script>

<button id="selfdestroytester" onclick="$(this).SelfDestroy('push to test if stil running')">check if valid running code</button>
<div id="report"> placeholder for output </div>
<button id="bomb" onclick="">push to start selfdestroy!</button>
<div id="counter" style="display:none"> hitcounter </div>
于 2013-04-15T03:26:26.977 回答
1

销毁插件意味着恢复添加的行为，即从受影响的元素中删除可拖动和可放置的行为。

droppable和draggable插件都提供了一个 destroy 方法来恢复所做的更改。

(function($){  
    $.fn.robotProof = function(options){
        var defaults = {
            //Default variables
        }

        var options = $.extend(defaults, options);
        return this.each(function(defaults){
            var _this = this;
        /* 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 *//////////       

                    //In this case destroy meanns reverting the added behaviour, that is removing both draggable and droppable behaviour from the affected elements
                    $('.peg').draggable('destroy');
                    $('.hole').droppable('destroy');
                } else {                        
                    $('.valid').animate({left: "286px",top: "1px"});//success
                }
            }
        });
    };
})(jQuery);  
$(document).ready(function(){
    $('.robotProof').robotProof();
});
于 2013-04-15T03:36:45.110 回答