1.给Api配置跨域
因为Client和Api是不同的端口，如果不给Api设置允许跨域请求，Client是调用不到接口的，需要在Startup.cs的Configure方法中添加如下代码
app.UseCors(builder => builder.WithOrigins("http://localhost:3000"));
2.获取数据
注释掉index.html中写死的数据，这些数据在index.js中通过调用http://localhost:5000/api/values接口来获取并且将数据添加到对应的元素上，代码如下
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(''));
}
刷新浏览器可以看到下图所示的结果
image.png
3.给图标添加双击事件
3.1 给第一排的图标添加双击事件
第一排的图标双击后应该显示到下面一排去，代码如下
$("#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设为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 给第二排的图标添加双击事件
第一排的图标双击后应该显示到第一排的最后面去(保存按钮前)，并且需要解绑第一排图标的拖拽事件，待双击事件完成(点击的第二排图标已经添加到第一排了)后重新实例化，代码如下
$("#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.保存按钮的点击事件
$("#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');
});
});
