Question

在前言中，我希望能够就如何完成这样的事情的最佳实践得出这个问题的一般答案，以及对我的具体要求的可能答案？

我一直致力于证明你是人类＆＃34;插件，我在所有东西加载时都能正常工作。我使用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();
});

你可以在droppable代码中看到错误（这将最终是所有错误）我需要能够重置该插件。

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

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

Answer 1

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

覆盖你的jQuery函数

$.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>

Answer 2

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

droppable和draggable插件都提供了一种销毁方法来还原所做的更改。

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

jQuery：如何销毁或重置插件

2 个答案: