`

ng-dialog可拖拽

阅读更多
需要jquery-ui.js  jquery-2.1.4.js
<script type="text/javascript" src="${pageContext.request.contextPath}/js/libs/jquery/jquery-ui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/libs/ngdialog/js/ngDialog.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/libs/jquery/jquery-2.1.4.js"></script>

var mockall = angular.module("mockall", [ 'ngDialog', 'ngRoute']);

mockall.config(function ($routeProvider) {
    $routeProvider.when("/index", {
        templateUrl: contextPath+"/templates/index.html",
        controller: "index"
    }).otherwise("/index");
});

mockall.controller("index", function ($scope,$http,ngDialog) {
    var dubboList = [];
    var restList = [];
    $scope.editRest = function(index){
    	var isEdit = false;
    	var old_url = "";
        if(typeof index != 'undefined'){
            isEdit = true;
            old_url = restList[index].url;
        }
        ngDialog.editor({
            template:contextPath+"/templates/rest-edit.html",
            title:isEdit ? "编辑" :"新增" ,
            controller:['$scope',function($scope){
            	$scope.obj = {};
                if(isEdit){
                    $scope.obj = restList[index];
                    $scope.obj.old_url = old_url;
                }else{
                	$scope.obj.restMethod = "post";
                }
                $scope.requestHeadersTip = false;
                $scope.requestTip = false;
                $scope.responseHeadersTip = false;
                $scope.responseTip = false;
                $scope.submit = function(){
                	if(!($scope.requestHeadersTip && $scope.requestTip
                			&& $scope.responseHeadersTip && $scope.responseTip)){
                		return;
                	}
                    console.log(JSON.stringify($scope.obj));
                    $http({
                        url: "conf/put_rest",
                        method: "POST",
                        data: JSON.stringify($scope.obj),
                        cache: false
                    }).success(function(data) {
                    	$scope.closeThisDialog();
                        $scope.obj = data;
                        if(data.code == 0){
                        	alert(isEdit ? "更新成功!" :"保存成功!");
                        	queryList("","1",1);
                        }
                    });

                };
                
                $scope.cancel = function(){
                    $scope.closeThisDialog();
                };
                
                validatorJson = function(jsonStr,name){
                    $http({
                        url: "conf/validator",
                        method: "POST",
                        data: {"jsonStr":jsonStr.value},
                        cache: false
                    }).success(function(data) {
                    	if(data == false){
                    		changeTip(name,true);
                    	}else{
                    		changeTip(name,false);
                    	}
                    });
                    
                };
                
                changeTip = function(name,value){
                	if(name == "requestHeadersTip"){
                		$scope.requestHeadersTip = value;
                	}
                	if(name == "requestTip"){
                		$scope.requestTip = value;
                	}
                	if(name == "responseHeadersTip"){
                		$scope.responseHeadersTip = value;
                	}
                	if(name == "responseTip"){
                		$scope.responseTip = value;
                	}
                }
            }]
        })
    };
    

   

});


然后在rest-edit.html中
<script>
	$(function() {
	    $(".panel").draggable();
  	});
</script>

.panel是div的class
分享到:
评论

相关推荐

    前端项目-ng-dialog.zip

    "前端项目-ng-dialog.zip"是一个包含ngDialog库的压缩包,这个库是专为基于Angular.js框架的应用程序设计的,用于实现模态对话框和弹出窗口功能。让我们深入探讨ngDialog以及如何在Angular.js项目中有效地使用它。 ...

    ng-dialog:基于AngularJS的kiddialog软件实现

    将现有对话框内容导入 ng-dialog: 将data/目录复制到 ng-dialog 中的app/data/ 将所有 PHP 序列化数据转换为 json 文档: $ find app/data -name ' .dat' -o -name ' .idx' -o -name '*.ser' | xargs xp -cp ...

    bootstrap3-dialog

    3. **自定义配置**:Bootstrap3-Dialog提供了许多配置选项,如`size`(大小)、`type`(类型,如警告、信息、成功或危险)、`closable`(是否可关闭)等,可以根据需求进行定制。 4. **使用API**:插件提供了一些...

    bootstrap3-dialog 基于bootstrap3的弹出层组件

    * 本js只是在bootstrap3-dialog的基础上进行的2次封装, * bootstrap3-dialog已经是非常好用了,调用也非常简单。 * 详情请访问:https://github.com/nakupanda/bootstrap3-dialog, * 这是原项目地址,可以自行...

    reactnative popup-dialog

    总之,`react-native-popup-dialog`为React Native开发者提供了一种方便的方式来实现具有高度可定制性的弹出对话框,从而提升应用的交互体验。通过学习和使用这个库,开发者可以更高效地开发出跨平台、适配性强的...

    vue-dialog-drag-可拖动对话框-Vue.js开发

    vue-dialog-drag简单的可拖动对话框演示功能:拖放支持(仅用于拖放,不用于拖放)拖放区域组件“ Pin模式”,以锁定vue-dialog-drag简单的可拖动对话框演示功能:拖放支持(仅用于拖动,不用于放置)放置区域组件...

    jquery-ui-dialog-demo

    开发者可能在这里设置 Dialog 的选项,如宽度、高度、是否可拖动,以及添加按钮和关联的回调函数。 3. **js** 和 **css** 目录 - 分别包含了 jQuery UI 库的 JavaScript 和 CSS 文件。JavaScript 文件提供了所有组件...

    sweet-alert-dialog

    "Sweet Alert Dialog" 是一个专为 Android 设计的高级对话框库,它为开发者提供了丰富的动画效果和多种对话框样式,极大地增强了应用的用户界面体验。这个库是基于 Android Studio 开发的,使得集成和自定义变得更加...

    各种自定义Dialog 以及Dialog加载动画

    在Android开发中,自定义Dialog和Dialog加载动画是提升应用用户体验的重要手段。默认的Dialog样式虽然功能齐全,但在追求个性化和美观的今天,往往显得过于简单甚至有些过时。因此,开发者常常需要根据应用的设计...

    elementui更改el-dialog关闭按钮的图标d的示例代码

    在Element UI框架中,`el-dialog` 是一个用于创建弹出式对话框的组件,它在用户界面中常用于显示重要信息或者进行确认操作。在某些设计需求下,可能需要自定义`el-dialog`的关闭按钮图标以符合特定的品牌风格或者...

    自定义圆角的dialog

    在Android应用开发中,Dialog是一种重要的用户交互组件,它用于显示临时信息或提示用户进行选择。系统提供的默认Dialog样式虽然实用,但往往无法满足开发者对于界面个性化和用户体验优化的需求。因此,自定义Dialog...

    android--Dialog

    在Android开发中,`Dialog`是一种非常常见的组件,它用于在主界面之上显示临时的、半透明的窗口,用于向用户展示信息或者进行简单的交互。本篇将详细讲解三种类型的`Dialog`:普通对话框、日期选择对话框、时间选择...

    cx-dialog-close备份.png.zip

    很抱歉,根据您提供的信息,"cx-dialog-close备份.png.zip"是一个包含名为"cx-dialog-close备份.png"的图片文件的压缩包。这个标题和描述并没有直接揭示任何特定的IT知识点,而标签为空,也没有提供额外的上下文。...

    前端弹出框插件art-dialog-test

    它具有丰富的功能,如支持拖动、调整大小、模态对话框、自定义按钮、回调函数等,能够满足开发者在不同场景下的需求。 ArtDialog的核心特性包括: 1. **高度可定制化**:ArtDialog允许开发者通过CSS样式和...

    Android代码-Range-Time-Picker-Dialog

    Range-Time-Picker-Dialog Simple Android Library that provide you a custom dialog that allow you to set a start time and end time. Screenshot Install Add this to your project ...

    vue-element-dialog-drag:支持ElementUI对话框拖动

    Vue元素对话框拖动支持ElementUI对话框拖动用法npm install vue - element - dialog - draggable -- saveimport DlgDraggable from "vue-element-dialog-draggable"Vue . use ( DlgDraggable , { containment : true...

    element ui 对话框el-dialog关闭事件详解

    在 Element UI 中,`el-dialog` 是一个非常重要的组件,它用来创建对话框或者称为模态窗口,常用于显示警告、确认操作或者进行表单输入等场景。 `el-dialog` 的关闭事件是开发过程中经常会用到的功能,特别是在需要...

    遮罩层弹出半透明dialog

    遮罩层弹出半透明dialog,很fashion。

    dialogstyle 去掉背景白色框

    在Android开发中,Dialog是一种常见的用户交互元素,用于在主线程中显示临时信息或进行简单的操作选择。默认情况下,Dialog会带有白色的背景边框,这可能会与应用的UI设计风格不一致,因此开发者有时需要去除这个...

Global site tag (gtag.js) - Google Analytics