jquery 关键字“拖曳搜索”之“拖曳”以及图片“提示自适应放大”效果的实现-工具盒子

关键字"拖曳搜索"之"拖曳"功能需要 jQuery UI 之 droppable 库效果如下：

搜索包含相关关键字时，把拖曳左边关键字到右边框里面也可以在输入框里输入自定义关键字到下面框即可搜索

如果去掉不需要的关键词搜索时把不需要的关键词从右边框拖曳回到左边即可

无论原来还是自定义加入的关键词如果已存在她会提示...

实现：
++复制代码++ 代码如下:

左边框右边框
++复制代码++ 代码如下:

拖曳关键代码：
拖曳关键词
++复制代码++ 代码如下:

$('#keywordIncluding a, #KeywordContent a').draggable({
helper: 'clone'
});
// 左边 keyword_content 拖曳到右边keyword_including
$('#KeywordContent').droppable({
accept: '#keywordIncluding a',
activeClass: 'keyword_content_active',
opacity: '0.5',
drop: function(ev, ui) {
$(this).addClass('dropped');
ui.draggable.fadeOut('fast', function() {
$(this).fadeIn('fast');
}).appendTo($(this));
}
});
// 右边 keyword_including 拖曳到左边keyword_content
$('#keywordIncluding').droppable({
accept: '#KeywordContent a',
activeClass: 'including_active',
opacity: '0.5',
drop: function(ev, ui) {
$(this).addClass('dropped');
ui.draggable.fadeOut('normal', function() {
$(this).fadeIn('fast');
}).appendTo($(this));
}
});

判断是否存在自定义的关键字，如果有就提示，没有的话就加入
++复制代码++ 代码如下:

//输入框点击
$('#AddInput input[type="button"]').click( InputInclude);
//输入框回车
function ownKeywordAddInput(evt)
{
if(evt.keyCode==13)
{
InputInclude();
}
}
//关键词是否存在
function InputInclude(){
$('#keywordIncluding').addClass("dropped");
var own = $('.add_to_search #AddInput input').val();
own = jQuery.trim(own);
if( own.length != 0)
{
//在此处理"|"问题
while(own.indexOf('|')>-1)
{
own = own.replace(/\|/g,"");
}
while(own.indexOf(' ')>-1)
{
own = own.replace(/ /g,"");
}
var ExistsKeywordArr = GetExistsKeywordArr();
for(var i=0;i<ExistsKeywordArr.length;i++)
{
if(ExistsKeywordArr[i]==own)
{
alert('此关键字已存在，请通过拖拽操作获取关键字来搜索图片');
return;
}
}
$('#keywordIncluding').append("<a href='#c' value="+own+" style='cursor:pointer'>"+ own +"</a>");
$('.add_to_search #AddInput #baohan').val('');
}
$('#keywordIncluding a').draggable({
helper: 'clone'
});
}