jQuery UI Sortable 的 scroll 选项参数不起作用,拖动到容器边缘无法自动滚动

scroll = true 选项能使拖动元素触碰到父(祖/body)容器的边缘时自动滚动,必须把容器(body)元素的 overflow 属性设置为默认值 overflow: visible;

描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

AngluarJS 数据绑定

$watch() 监视数据改变
$apply()  通知某些数据改变了
$digest() 处理所有当前作用域和子作用域监视的数据

过滤器

示例需求:{{ user.name | displayName | limitTo:40 }}
改进示例:{{ user.name | displayName }}
// 注入与当前模块关联的过滤器可以通过依赖注入作为 $filter 访问
app.filter(‘displayName’, function($filter){

return function(name){

return $filter(‘limitTo’)(name.first + ” ”  + name.last, 40)

}

})

AngluarJS 架构之控制器、服务、指令

控制器

1.作用域继承
$scope 可以访问上级 $scope
 
2.事件传输
$scope.$on(‘Event’, function(){})   // 监听指定的事件
$scope.$emit(‘Event’, function(){}) // 注册监听事件,向祖作用域传播
$scope.$broadcast(‘Event’, function(){}) // 注册监听事件,向子作用域传播
 
3.ModelServier 模式
// 创建 Servier 实例
app.factory(‘nameService’, function($timeout){

// $timeout ($http)服务将在页面根作用域调用$apply()

$timeout(function(){ }, 500)

})
// 使用 Servier 实例 , 注入服务
app.constroller(‘nameConstroller’, function($scope, nameService){ })

服务

1.依赖其他服务的服务
// 创建 Servier 实例,注入服务
app.factory(‘twoService’, function(oneService){ })
2.事件发射器模块
even-mitter.js  是独立于作用域的,方法为 .on() 和 .emit()
 

指令

angular.module(‘app’).directive(‘myDirective’,function(){

return {}

})
官方文档

JS 事件处理之跨浏览器事件处理程序

  1. /**
  2.   * 跨浏览器事件处理程序
  3.   */
  4. var EventUtil = {
  5.     // 分别使用DOM0、DOM2级方法或IE方法来添加事件
  6.     // element 要操纵的元素,type 事件名称,handler 事件处理程序函数
  7.     addHandler: function(element, type, handler){
  8.         if (element.addEventListener){
  9.             element.addEventListener(type, handler, false);
  10.         } else if (element.attachEvent){
  11.             element.attachEvent(“on” + type, handler);
  12.         } else {
  13.             element[“on” + type] = handler;
  14.         }
  15.     },
  16.     // 返回正确的 button 属性
  17.     getButton: function(event){
  18.         if (document.implementation.hasFeature(“MouseEvents”“2.0”)){
  19.             return event.button;
  20.         } else {
  21.             // IE
  22.             switch(event.button){
  23.                 case 0:
  24.                 case 1:
  25.                 case 3:
  26.                 case 5:
  27.                 case 7:
  28.                     return 0;
  29.                 case 2:
  30.                 case 6:
  31.                     return 2;
  32.                 case 4: return 1;
  33.             }
  34.         }
  35.     },
  36.     // 检测 charCode 属性是否包含数值
  37.     getCharCode: function(event){
  38.         if (typeof event.charCode == “number”){
  39.             return event.charCode;
  40.         } else {
  41.             return event.keyCode;
  42.         }
  43.     },
  44.     // 获得剪切板文字
  45.     getClipboardText: function(event){
  46.         var clipboardData =  (event.clipboardData || window.clipboardData);
  47.         return clipboardData.getData(“text”);
  48.     },
  49.     // 返回 event 对象的引用
  50.     getEvent: function(event){
  51.         return event ? event : window.event;
  52.     },
  53.     // 返回与事件的目标节点相关的节点
  54.     getRelatedTarget: function(event){
  55.         if (event.relatedTarget){
  56.             return event.relatedTarget;
  57.         } else if (event.toElement){
  58.             return event.toElement;
  59.         } else if (event.fromElement){
  60.             return event.fromElement;
  61.         } else {
  62.             return null;
  63.         }
  64.     },
  65.     // 返回事件的目标
  66.     getTarget: function(event){
  67.         return event.target || event.srcElement;
  68.     },
  69.     // 检测了事件是否包含 wheelDelta属性
  70.     getWheelDelta: function(event){
  71.         if (event.wheelDelta){
  72.             return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
  73.         } else {
  74.             return -event.detail * 40;
  75.         }
  76.     },
  77.     // 用于取消事件的默认行为
  78.     preventDefault: function(event){
  79.         if (event.preventDefault){
  80.             event.preventDefault();
  81.         } else {
  82.             event.returnValue = false;
  83.         }
  84.     },
  85.     // 分别使用DOM0、DOM2级方法或IE方法来删除事件
  86.     // element 要操纵的元素,type 事件名称,handler 事件处理程序函数
  87.     removeHandler: function(element, type, handler){
  88.         if (element.removeEventListener){
  89.             element.removeEventListener(type, handler, false);
  90.         } else if (element.detachEvent){
  91.             element.detachEvent(“on” + type, handler);
  92.         } else {
  93.             element[“on” + type] = null;
  94.         }
  95.     },
  96.     // 设置剪切板文字
  97.     setClipboardText: function(event, value){
  98.         if (event.clipboardData){
  99.             event.clipboardData.setData(“text/plain”, value);
  100.         } else if (window.clipboardData){
  101.             window.clipboardData.setData(“text”, value);
  102.         }
  103.     },
  104.     // 不再派发(终止)事件
  105.     stopPropagation: function(event){
  106.         if (event.stopPropagation){
  107.             event.stopPropagation();
  108.         } else {
  109.             event.cancelBubble = true;
  110.         }
  111.     }
  112. };

js 高级技巧之拖放功能的实现

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Drag and Drop Example</title>
  5.     <script type=“text/javascript” src=EventUtil.js></script>
  6.     <script type=“text/javascript” src=EventTarget.js></script>
  7. </head>
  8. <body>
  9.     <div id=“status”></div>
  10.     <div id=“myDiv1” class=“draggable” style=“top:100px;left:0px;background:red;width:100px;height:100px;position:absolute”></div>
  11.     <div id=“myDiv2” class=“draggable” style=“background:blue;width:100px;height:100px;position:absolute;top:100px;left:100px”></div>
  12.     <script type=“text/javascript”>
  13.         var DragDrop = function(){
  14.             var dragdrop = new EventTarget(),
  15.                 dragging = null,
  16.                 diffX = 0,
  17.                 diffY = 0;
  18.             function handleEvent(event){
  19.                 // 获取事件和对象 get event and target
  20.                 event = EventUtil.getEvent(event);
  21.                 var target = EventUtil.getTarget(event);
  22.                 // 确定事件类型 determine the type of event
  23.                 switch(event.type){
  24.                     case “mousedown”:
  25.                         if (target.className.indexOf(“draggable”) > -1){
  26.                             dragging = target;
  27.                             diffX = event.clientX – target.offsetLeft;
  28.                             diffY = event.clientY – target.offsetTop;
  29.                             dragdrop.fire({type:“dragstart”, target: dragging, x: event.clientX, y: event.clientY});
  30.                         }
  31.                         break;
  32.                     case “mousemove”:
  33.                         if (dragging !== null){
  34.                             // 指定位置 assign location
  35.                             dragging.style.left = (event.clientX – diffX) + “px”;
  36.                             dragging.style.top = (event.clientY – diffY) + “px”;
  37.                             // 触发自定义事件 fire custom event
  38.                             dragdrop.fire({type:“drag”, target: dragging, x: event.clientX, y: event.clientY});
  39.                         }
  40.                         break;
  41.                     case “mouseup”:
  42.                         dragdrop.fire({type:“dragend”, target: dragging, x: event.clientX, y: event.clientY});
  43.                         dragging = null;
  44.                         break;
  45.                 }
  46.             };
  47.             // 公共接口 public interface
  48.             dragdrop.enable = function(){
  49.                     EventUtil.addHandler(document, “mousedown”, handleEvent);
  50.                     EventUtil.addHandler(document, “mousemove”, handleEvent);
  51.                     EventUtil.addHandler(document, “mouseup”, handleEvent);
  52.             };
  53.             dragdrop.disable = function(){
  54.                     EventUtil.removeHandler(document, “mousedown”, handleEvent);
  55.                     EventUtil.removeHandler(document, “mousemove”, handleEvent);
  56.                     EventUtil.removeHandler(document, “mouseup”, handleEvent);
  57.             };
  58.             return dragdrop;
  59.         }();
  60.         DragDrop.enable();
  61.         DragDrop.addHandler(“dragstart”function(event){
  62.             var status = document.getElementById(“status”);
  63.             status.innerHTML = “Started dragging “ + event.target.id;
  64.         });
  65.         DragDrop.addHandler(“drag”function(event){
  66.             var status = document.getElementById(“status”);
  67.             status.innerHTML += “<br>Dragged “ + event.target.id + ” to (“ + event.x + “,” + event.y + “)”;
  68.         });
  69.         DragDrop.addHandler(“dragend”function(event){
  70.             var status = document.getElementById(“status”);
  71.             status.innerHTML += “<br>Dropped “ + event.target.id + ” at (“ + event.x + “,” + event.y + “)”;
  72.         });
  73.     </script>
  74. </body>
  75. </html>