1.給Api配置跨域
因?yàn)镃lient和Api是不同的端口，如果不給Api設(shè)置允許跨域請(qǐng)求，Client是調(diào)用不到接口的，需要在Startup.cs的Configure方法中添加如下代碼
app.UseCors(builder => builder.WithOrigins("http://localhost:3000"));
2.獲取數(shù)據(jù)
注釋掉index.html中寫死的數(shù)據(jù)钟病，這些數(shù)據(jù)在index.js中通過(guò)調(diào)用http://localhost:5000/api/values接口來(lái)獲取并且將數(shù)據(jù)添加到對(duì)應(yīng)的元素上，代碼如下
var ajaxUrl = 'http://localhost:5000/api/values?parentId=ACB951B9-EA43-4F71-9E45-081229E3F26A&userId=FBAD9A6E-89D1-49E9-9CBD-F1D04C67443A';
getData(ajaxUrl, {}, function () {
$('#user-choosn-tool').find('.drag-element').drag({
'dragLimitId': '#user-choosn-tool',
'dragEleClass': '.drag-element'
});
});
function getData(url, data = {}, callback){
$.get(url, data, function(response){
appendEnableElement(response.enable);
appendNotEnableElement(response.notEnable);
typeof(callback) === 'function' && callback();
});
}
function appendEnableElement(data) {
var html = [];
data.forEach((item) => {
postData.push(item.setting);
html.push(`<dl class="drag-element cross-element" data-index="${item.setting.sortCode}" data-setting-id="${item.setting.id}">
<a href="javascript:void(0);">
<dd>
<img src="${item.imagePath}">
</dd>
<dt data-name="${item.code}" data-detail-id="${item.id}">${item.fullName}</dt>
</a>
</dl>`);
});
html.push(`<dl class="" id="submit-btn">
<a href="javascript: void(0);">
<dd class="tj_ico">
<img src="/images/ico_bc_2.png">
</dd>
<dt>保存</dt>
</a>
</dl>
<div class="clear"></div>`);
$('#user-choosn-tool').html(html.join(''));
}
function appendNotEnableElement(data) {
var html = [];
data.forEach((item) => {
html.push(`<dl class="all-portal-tool">
<a href="javascript:void(0);">
<dd>
<img src="${item.imagePath}">
</dd>
<dt data-name="${item.code}" data-detail-id="${item.id}">${item.fullName}</dt>
</a>
</dl>`);
});
html.push(`<div class="clear"></div>`);
$('#can-choose-tool').html(html.join(''));
}
刷新瀏覽器可以看到下圖所示的結(jié)果
image.png
3.給圖標(biāo)添加雙擊事件
3.1 給第一排的圖標(biāo)添加雙擊事件
第一排的圖標(biāo)雙擊后應(yīng)該顯示到下面一排去，代碼如下
$("#user-choosn-tool").on('dblclick', '.drag-element', function () {
if(isAnimate){
return;
}
isAnimate = true;
var $this = $(this),
settingId = $this.data('settingId'),
$choosnTool = $("#can-choose-tool"),
html = this.innerHTML,
$dl = $('<dl class="all-portal-tool">').html(html),
i = index = Number($this.attr('data-index')),
count = $('#user-choosn-tool').find('.drag-element.cross-element').length;
// 如果settingId存在档悠，把postData的isDelete設(shè)為true
if (settingId) {
postData.find(item => item.id === settingId).isDelete = true;
}
$choosnTool.children().last().before($dl);
$this.siblings('.drag-element').each(function(){
$(this).data('drag').$crossEles.splice($this.index(), 1);
$(this).data('drag').$dragEles.splice($this.index(), 1);
});
$this.drag('offEvent');
$this.remove();
while(++index <= count){
(function(_index){
$('#user-choosn-tool').find('[data-index="' + _index + '"]').delay((_index - i) * 200).animate({left: '-=100'}, 300, function(){
$(this).attr('data-index', _index - 1).data('index', _index - 1);
});
if(_index === count){
$('#submit-btn').delay((index - i - 1) * 300).animate({ left: '-=100' }, 300, function(){
isAnimate = false;
$('#user-choosn-tool').find('.drag-element').drag({
'dragLimitId': '#user-choosn-tool',
'dragEleClass': '.drag-element'
});
});
}
})(index);
}
});
3.2 給第二排的圖標(biāo)添加雙擊事件
第一排的圖標(biāo)雙擊后應(yīng)該顯示到第一排的最后面去(保存按鈕前)廊鸥，并且需要解綁第一排圖標(biāo)的拖拽事件，待雙擊事件完成(點(diǎn)擊的第二排圖標(biāo)已經(jīng)添加到第一排了)后重新實(shí)例化辖所，代碼如下
$("#can-choose-tool").on('dblclick', '.all-portal-tool', function () {
if(isAnimate){
return;
}
isAnimate = true;
var $this = $(this),
$choosnTool = $("#user-choosn-tool"),
count = $choosnTool.find('.drag-element.cross-element').length,
pos = $('#submit-btn').position(),
html = this.innerHTML;
$('#user-choosn-tool').find('.drag-element').drag('offEvent');
$('#submit-btn').animate({ left: '+=100' }, 300, function() {
var $dl = $('<dl class="drag-element cross-element" data-index="' + count + '">').html(html).css({
left: pos.left,
top: pos.top
});
$(this).before($dl);
$this.remove();
$('#user-choosn-tool').find('.drag-element').drag({
'dragLimitId': '#user-choosn-tool',
'dragEleClass': '.drag-element'
});
isAnimate = false;
});
});
4.保存按鈕的點(diǎn)擊事件
$("#user-choosn-tool").on('click', '#submit-btn', function(){
$("#user-choosn-tool .drag-element").each(function () {
var $this = $(this),
settingId = $this.data('settingId'),
detailId = $this.find('dt').data('detailId'),
sortCode = $this.data('index');
if (settingId) {
postData.find(item => item.id === settingId).sortCode = sortCode;
} else {
postData.push({
sortCode,
detailId,
userId: 'FBAD9A6E-89D1-49E9-9CBD-F1D04C67443A'
});
}
});
var url = 'http://localhost:5000/api/values';
$.post(url, {settings: postData}, function (response) {
$('#user-choosn-tool').find('.drag-element').drag('offEvent');
$('#user-choosn-tool').off('dblclick, click');
$("#can-choose-tool").off('dblclick');
});
});
