專案當中遇見控制的問題，之前用JQ寫的面板拖曳效果 想移植到angular程式碼裡面不知道該怎麼處理 求大神知道
JQ程式碼
scale = function (btn, bar, title, from, to, initnum) {
//获取增减温度的按钮
this.plus = $('.scale_btn_l a');
this.add = $('.scale_btn_r a');
this.btn = document.getElementById(btn);
this.bar = document.getElementById(bar);
this.title = document.getElementById(title);
this.step = this.bar.getElementsByTagName("p")[0];
this.from = from;
this.to = to;
this.initnum = initnum;
this.init();
};
var length = 0;
scale.prototype = {
init: function () {
var f = this, g = document, b = window, m = Math;
$('.scale_panel .fl').html(f.from + '℃');
$('.scale_panel .fr').html(f.to + '℃');
$('.basemsg span').html(f.initnum + '℃');
if (f.from) {
length = 100 / (f.to - f.from);
var lengthinit = f.to - f.initnum;
var offsetleft = (f.bar.clientWidth / (f.to - f.from)) * (Math.abs(f.to - f.from) - Math.abs(lengthinit)) + length;
this.title.innerHTML = this.initnum;
f.btn.style.left = offsetleft + 'px';
this.step.style.width = offsetleft + 'px';
}
f.btn.addEventListener('touchstart', function(event) {
var x = event.targetTouches[0].pageX;
var l = this.offsetLeft;
var max = f.bar.offsetWidth - this.offsetWidth;
g.addEventListener('touchmove',function(_event){
var thisX = _event.targetTouches[0].pageX;
var to = m.min(max, m.max(-2, l + (thisX - x)));
if (to > length) {
to += length;
}
if(to > f.bar.offsetWidth){
f.btn.style.left = f.bar.offsetWidth + 'px';
f.ondrag(m.round(m.max(0, to / max) * 100), f.bar.offsetWidth);
}else{
f.btn.style.left = to + 'px';
f.ondrag(m.round(m.max(0, to / max) * 100), to);
}
b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
});
}, false);
/*f.btn.touchstart = function (e) {
var x = (e || b.event).clientX;
var l = this.offsetLeft;
var max = f.bar.offsetWidth - this.offsetWidth;
g.touchmove = function (e) {
var thisX = (e || b.event).clientX;
var to = m.min(max, m.max(-2, l + (thisX - x)));
if (to > length) {
to += length;
}
f.btn.style.left = to + 'px';
f.ondrag(m.round(m.max(0, to / max) * 100), to);
b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
};
g.touchend = new Function('this.touchmove=null');
};*/
//手动控制
f.plus.on('click', function () {
var currentNum = parseInt(f.title.innerHTML);
if (currentNum > f.from) {
var lengthinit = f.to - (currentNum - 1);
var offsetleft = (f.bar.clientWidth / (f.to - f.from)) * (Math.abs(f.to - f.from) - Math.abs(lengthinit)) + length;
f.title.innerHTML = currentNum - 1;
$('.basemsg span').html((currentNum - 1) + '℃');
// $('.leng').html((currentNum - 1) + '℃');
if ((currentNum - 1) == f.from) {
f.btn.style.left = 0 + 'px';
f.step.style.width = 0 + 'px';
} else {
f.btn.style.left = offsetleft + 'px';
f.step.style.width = offsetleft + 'px';
}
}
});
f.add.on('click', function () {
var currentNum = parseInt(f.title.innerHTML);
if (currentNum < f.to) {
var lengthinit = f.to - (currentNum + 1);
var offsetleft = (f.bar.clientWidth / (f.to - f.from)) * (Math.abs(f.to - f.from) - Math.abs(lengthinit)) + length;
f.title.innerHTML = currentNum + 1;
$('.basemsg span').html((currentNum + 1) + '℃');
// $('.leng').html((currentNum + 1) + '℃');
if ((currentNum + 1) == f.to) {
f.btn.style.left = f.bar.clientWidth + 'px';
f.step.style.width = f.bar.clientWidth + 'px';
} else {
f.btn.style.left = offsetleft + 'px';
f.step.style.width = offsetleft + 'px';
}
}
});
},
ondrag: function (pos, x) {
var num = parseInt(pos / length) + 1;
var num1 = 0;
if (this.from < 0) {
num1 = this.from + (num - 1);
} else {
num1 = num;
}
this.step.style.width = Math.max(0, x) + 'px';
this.title.innerHTML = num1;
$('.basemsg span').html(num1 + '℃');
}
}
//冰箱温度控制
//new scale('btn', 'bar', 'title', -23, -15, -13);
function changeTemper($this, $type) {
$('.dialog').remove();
var num = $this.find('p span').html();
if ($type == 1) {
//冷藏区
cangshiname = '冷藏区';
$('.main').append(dialogModal('冷藏区'));
new scale('btn', 'bar', 'title', 1, 9, num);
} else if ($type == 2) {
//变温区
$('.main').append(dialogModal('变温区'));
new scale('btn', 'bar', 'title', -20, 5, num);
} else if ($type == 3) {
//冷冻区
$('.main').append(dialogModal('冷冻区'));
new scale('btn', 'bar', 'title', -23, -15, num);
}
$('.dialog').find('.dialog-btn-ok').on('click', function () {
//跟控制面板交互根据$type参数联动数据
if ($type == 1){
$this.find('p span').html($('.basemsg span').html().replace('℃', ''));
$('.leng').html($('.basemsg span').html().replace('℃', ''));
$('.dialog').remove();
}
else if ($type == 2){
$this.find('p span').html($('.basemsg span').html().replace('℃', ''));
$('.bian').html($('.basemsg span').html().replace('℃', ''));
$('.dialog').remove();
}
else if ($type == 3){
$this.find('p span').html($('.basemsg span').html().replace('℃', ''));
$('.dong').html($('.basemsg span').html().replace('℃', ''));
$('.dialog').remove();
}
});
}
function dialogModal($name){
var htmlstr = '<p class="dialog">' +
' <p class="mask"></p>' +
' <p class="dialog-modal">' +
' <p class="dialog-bd">' +
' <p class="vfridge-slide">' +
' <p class="basemsg">' + $name + '<span>-20℃</span>' +
' <small>实时温度</small>' +
' </p>' +
' <p class="scale_wrap">' +
' <p class="scale_btn_l fl"><a><img src="images/refrigeratorControl/icon-plusDevice@3x.png"></a></p>' +
' <p class="scale_panel fl">' +
' <span class="fl">-23℃</span>' +
' <p class="scale" id="bar">' +
' <p id="scaleprogress" name="scaleprogress" class="scaleprogress"></p>' +
' <p id="btn" class="btn">' +
' <span id="title" class="msg">-23</span>' +
' </p>' +
' </p>' +
' <span class="fr">-15℃</span>' +
' </p>' +
' <p class="scale_btn_r fr"><a><img src="images/refrigeratorControl/icon-addDevice@3x.png"></a></p>' +
' </p>' +
' <p>设置温度</p>' +
' </p>' +
' </p>' +
' <p class="dialog-ft">' +
' <a class="dialog-btn-cancel" onclick="$(\'.dialog\').remove();changge = null;">取消</a>' +
' <a class="dialog-btn-ok">确定</a>' +
' </p>' +
' </p>' +
'</p>';
return htmlstr;
}angular
//加温度
$scope.plusTemp = function(type){
if (type == 1) {
if ($scope.refrigeratorTargetTemperature >= $scope.DeviceData.refrigeratorTargetTemperature.logic.range.maxValue) {
if ($$(".ModalPromptBox").length === 0) {
$translate(['lang_maxTem','lang_cannotHigh']).then(function(translations) {
$$.warn(translations.lang_maxTem + " " + $scope.DeviceData.refrigeratorTargetTemperature.logic.range.maxValue + translations.lang_cannotHigh);
});
}
} else {
$scope.refrigeratorTargetTemperature === "-/-" ? 0 : $scope.refrigeratorTargetTemperature;
$scope.refrigeratorTargetTemperature += $scope.DeviceData.refrigeratorTargetTemperature.logic.range.step;
$scope.settingTemp({
'refrigeratorTargetTemperature': $scope.refrigeratorTargetTemperature
});
}
}
else if (type == 3) {
if ($scope.vtRoomTargetTemperature +21 >= $scope.DeviceData.vtRoomTargetTemperature.logic.range.maxValue) {
if ($$(".ModalPromptBox").length === 0) {
$translate(['lang_maxTem','lang_cannotHigh']).then(function(translations) {
$$.warn(translations.lang_maxTem + " " + ($scope.DeviceData.vtRoomTargetTemperature.logic.range.maxValue -21)+ translations.lang_cannotHigh);
});
}
} else {
$scope.vtRoomTargetTemperature === "-/-" ? 0 : $scope.vtRoomTargetTemperature;
$scope.vtRoomTargetTemperature += $scope.DeviceData.vtRoomTargetTemperature.logic.range.step;
$scope.settingTemp({
'vtRoomTargetTemperature': $scope.vtRoomTargetTemperature
});
}
}
else {
if (($scope.freezerTargetTemperature+26) >= $scope.DeviceData.freezerTargetTemperature.logic.range.maxValue) {
if ($$(".ModalPromptBox").length === 0) {
$translate(['lang_maxTem','lang_cannotHigh']).then(function(translations) {
$$.warn("不能再高了"+ " " + ($scope.DeviceData.freezerTargetTemperature.logic.range.maxValue -26) + translations.lang_cannotHigh);
});
}
} else {
$scope.freezerTargetTemperature === "-/-" ? 0 : $scope.freezerTargetTemperature;
$scope.freezerTargetTemperature += $scope.DeviceData.freezerTargetTemperature.logic.range.step;
$scope.settingTemp({
'freezerTargetTemperature': $scope.freezerTargetTemperature
});
}
}
};
//减温度
$scope.minusTemp = function(type){
if (type == 1) {
if ($scope.refrigeratorTargetTemperature <= $scope.DeviceData.refrigeratorTargetTemperature.logic.range.minValue) {
if ($$(".ModalPromptBox").length === 0) {
$translate(['lang_minTem','lang_cannotLow']).then(function(translations) {
$$.warn(translations.lang_minTem + " " + $scope.DeviceData.refrigeratorTargetTemperature.logic.range.minValue + translations.lang_cannotLow);
});
}
} else {
$scope.refrigeratorTargetTemperature === "-/-" ? 0 : $scope.refrigeratorTargetTemperature;
$scope.refrigeratorTargetTemperature -= $scope.DeviceData.refrigeratorTargetTemperature.logic.range.step;
$scope.settingTemp({
'refrigeratorTargetTemperature': $scope.refrigeratorTargetTemperature
});
}
}
else if (type == 3){
if (($scope.vtRoomTargetTemperature +21 ) <= $scope.DeviceData.vtRoomTargetTemperature.logic.range.minValue) {
if ($$(".ModalPromptBox").length === 0) {
$translate(['lang_minTem','lang_cannotLow']).then(function(translations) {
$$.warn(translations.lang_minTem + " " + ($scope.DeviceData.vtRoomTargetTemperature.logic.range.minValue -21) + translations.lang_cannotLow);
});
}
} else {
$scope.vtRoomTargetTemperature === "-/-" ? 0 : $scope.vtRoomTargetTemperature;
$scope.vtRoomTargetTemperature -= $scope.DeviceData.vtRoomTargetTemperature.logic.range.step;
$scope.settingTemp({
'vtRoomTargetTemperature': $scope.vtRoomTargetTemperature
});
}
} else {
if (($scope.freezerTargetTemperature+26) <= $scope.DeviceData.freezerTargetTemperature.logic.range.minValue) {
if ($$(".ModalPromptBox").length === 0) {
$translate(['lang_minTem','lang_cannotLow']).then(function(translations) {
$$.warn(translations.lang_minTem + " " + ($scope.DeviceData.freezerTargetTemperature.logic.range.minValue -26) + translations.lang_cannotLow);
});
}
} else {
$scope.freezerTargetTemperature === "-/-" ? 0 : $scope.freezerTargetTemperature;
$scope.freezerTargetTemperature -= $scope.DeviceData.freezerTargetTemperature.logic.range.step;
$scope.settingTemp({
'freezerTargetTemperature': $scope.freezerTargetTemperature
});
}
}
};
可以angular指令裡寫jQuery程式碼，如果已經引入了jQuery函式庫，那麼angular指令中link的第二個參數就是jQuery物件。
雷雷