tag:blogger.com,1999:blog-59465307047421309702024-03-06T16:20:07.273+08:00Jax 的工作紀錄除了在整理學習上的經驗,同時也能幫助其他需要的人Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.comBlogger4125tag:blogger.com,1999:blog-5946530704742130970.post-57148724996672835022014-05-08T02:58:00.000+08:002014-05-08T02:58:09.841+08:00[AngularJS] 製作 jQuery UI Sortable directiveHtml<br />
<pre class="xml" name="code"><div jq-sortable="selectedList">
<div ng-repeat="item in selectedList">
<img ng-src="{{item.src}}" />
</div>
</div>
</pre><br />
<br />
JavaScript<br />
<pre class="js" name="code">app.directive('jqSortable', ['$parse', function($parse) {
return function(scope, element, attrs) {
/*解析並取得表達式*/
var expr = $parse(attrs['jqSortable']);
var $oldChildren;
element.sortable({
opacity: 0.7,
scroll: false,
tolerance: "pointer",
start: function() {
/*紀錄移動前的 children 順序*/
$oldChildren = element.children('[ng-repeat]');
},
update: function(){
var newList = [];
var oldList = expr(scope);
var $children = element.children('[ng-repeat]');
/*產生新順序的陣列*/
$oldChildren.each(function(i){
var index = $children.index(this);
if(index == -1){ return; }
newList[index] = oldList[i];
});
/*將新順序的陣列寫回 scope 變數*/
expr.assign(scope, newList);
/*通知 scope 有異動發生*/
scope.$digest();
}
});
/*在 destroy 時解除 Sortable*/
scope.$on('$destroy', function(){
element.sortable('destroy');
});
};
}]);
</pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-82000849991912917322014-05-08T02:56:00.000+08:002014-05-08T02:58:56.043+08:00[AngularJS] 製作 Mouse Drag Event directiveHtml<br />
<pre class="xml" name="code"><div ng-style="{'top': itemTop, 'left': itemLeft}"
my-mousedrag="itemTop = itemTop - $deltaY; itemLeft = itemLeft - $deltaX"
></div>
</pre><br />
JavaScript<br />
<pre class="js" name="code">app.directive('myMousedrag', function() {
return function(scope, element, attrs) {
var prevEvent;
element.mousedown(function(event){
prevEvent = event;
}).mouseup(function(event){
prevEvent = null;
}).mousemove(function(event){
if(!prevEvent){ return; }
/*將 element 拖移事件傳遞到 scope 上*/
scope.$eval(attrs['myMousedrag'], {
$event: event,
$deltaX: event.clientX - prevEvent.clientX,
$deltaY: event.clientY - prevEvent.clientY
});
/*通知 scope 有異動發生*/
scope.$digest();
prevEvent = event;
});
/*在 destroy 時清除事件註冊*/
scope.$on('$destroy', function(){
element.off('mousedown mouseup mousemove');
});
};
});
</pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-14100384141966647202014-05-08T02:54:00.000+08:002014-05-08T02:54:14.702+08:00[AngularJS] 製作 jQuery MouseWheel directive相依套件:<a href="https://github.com/brandonaaron/jquery-mousewheel" target="_blank">jquery-mousewheel</a><br />
<br />
Html<br />
<pre class="xml" name="code"><div jq-mousewheel="changeSize($event, $delta, $deltaX, $deltaY)"></div>
</pre><br />
JavaScript<br />
<pre class="js" name="code">app.directive('jqMousewheel', function(){
return function(scope, element, attrs) {
/*將 element 滾輪事件傳遞到 scope 上*/
element.on('mousewheel', function (event) {
scope.$eval(attrs['jqMousewheel'], {
$event: event,
$delta: event.delta,
$deltaX: event.deltaX,
$deltaY: event.deltaY
});
/*通知 scope 有異動發生*/
scope.$digest();
});
/*在 destroy 時清除事件註冊*/
scope.$on('$destroy', function(){
element.off('mousewheel');
});
};
});
</pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-26510350574789047362014-05-08T02:52:00.000+08:002014-05-08T03:00:03.540+08:00[AngularJS] 製作 jQuery scrollTop scrollLeft directiveHtml<br />
<pre class="xml" name="code"><div jq-scroll-top="viewerScrollTop"
jq-scroll-left="viewerScrollLeft"
></div>
</pre><br />
JavaScript<br />
<pre class="js" name="code">app.directive('jqScrollTop', ['$parse', function($parse){
return function(scope, element, attrs) {
/*解析並取得表達式*/
var expr = $parse(attrs['jqScrollTop']);
/*監聽變數異動,並更新到 element 上*/
scope.$watch(attrs['jqScrollTop'], function(value) {
element.scrollTop(value);
});
/*當 element 捲動時更新到變數上*/
element.on('scroll', function() {
expr.assign(scope, element.scrollTop());
});
/*在 destroy 時清除事件註冊*/
scope.$on('$destroy', function(){
element.off('scroll');
});
};
}]);
app.directive('jqScrollLeft', ['$parse', function($parse){
return function(scope, element, attrs) {
/*解析並取得表達式*/
var expr = $parse(attrs['jqScrollLeft']);
/*監聽變數異動,並更新到 element 上*/
scope.$watch(attrs['jqScrollLeft'], function(value) {
element.scrollLeft(value);
});
/*當 element 捲動時更新到變數上*/
element.on('scroll', function() {
expr.assign(scope, element.scrollLeft());
});
/*在 destroy 時清除事件註冊*/
scope.$on('$destroy', function(){
element.off('scroll');
});
};
}]);
</pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0