使用Jquery.UI的drag/drop进行提交验证

Jquery ui是为jquery量身制作,非常好用的jquery工具插件.虽然功能简单但非常实用.jqueryUI在百度的静态js库里面有资源,可以直接使用提高浏览速度.前几天突发奇想,用Jquery ui的drag drop来实现提交验证.

如下图所示:

关于这个插件的用法:https://jqueryui.com/droppable/

使用起来也很方便

//绑定提交评论事件
                    $('#submit-comment-lnkbutton').click(function () {
                        $("#submit-comment").dialog();
                        //$("#submit-comment").draggable();
                    });
                    //拖拽验证
                    $('#apple').draggable({ revert: "valid" });
                    $("#plate").droppable({
                        drop: function (event, ui) {
                            $(this).css("margin-left", "solid red 2px");
                            $("#submit-comment").dialog( "close" );
                            var content = $('#commentBox').val();
                            if (content.length >= 4) {
                                submitComment(<%=articleId%>,content,$('#isNotifyAuthor').is(':checked'))
                                 
                            } else {
                                alert("内容太短");
                            }
                             
                        }
                    });

点击评论按钮弹出dialog,接收到drag/drop事件后,判断内容长度,如果内容较短则不提交,长度足够,则使用ajax提交内容.

这个drag/drop的验证没有服务器参与,只依靠了jquery ui的自身特性.安全程度未知.这里只是提供了一种提交验证的简单方案.