jquery keyword "Drag search" and "drag" and picture "prompt adaptive amplification" effect _jquery

The "Drag" feature of the keyword "Drag search" requires the droppable library effect of the JQuery UI as follows:

Search contains related keywords, drag the left keyword to the right side of the box can also enter a custom keyword in the input box to the following box to search

If you remove unwanted keyword search, drag the unwanted keyword from the right frame and back to the left.

Whether the original or custom added keyword if already exists she will prompt ...

Realize:

Copy Code code as follows:

<script type= "Text/javascript" src= "Js/jquery-1.4.2.min.js" ></script>
<script type= "Text/javascript" src= "Js/jquery-ui-1.8.custom.min.js" ></script>

Left border right border

Copy Code code as follows:

<div id= "keywordcontent" class= "Keyword_content_background ui-droppable" >
<a href= "#c" value= "warm" style= "cursor:pointer" > Warm </a>
<a href= "#c" value= "Spring" style= "Cursor:pointer" > Spring </a>
<a href= "#c" value= "Children" style= "Cursor:pointer" > Children </a>
<a href= "#c" value= "Beauty" style= "Cursor:pointer" > Beauty </a>
<a href= "#c" value= "Love" style= "Cursor:pointer" > Love </a>
....
</div>
<div id= "keywordincluding" class= "keyword_including" >
</div>

Drag key code:
Drag keywords

Copy Code code as follows:

$ (' #keywordIncluding A, #KeywordContent a '). Draggable ({
Helper: ' Clone '
});
Left Keyword_content drag to the right 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));
}
});
Right keyword_including drag to left 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));
}
});

To determine whether there is a custom keyword, if there is a prompt, no words to join

Copy Code code as follows:

Input Box click
$ (' #AddInput input[type= button '] '). Click (inputinclude);
Input Box Carriage return
function Ownkeywordaddinput (EVT)
{
if (evt.keycode==13)
{
Inputinclude ();
}
}
Whether the keyword exists
function Inputinclude () {
$ (' #keywordIncluding '). AddClass ("Dropped");
var own = $ ('. Add_to_search #AddInput input '). Val ();
own = Jquery.trim (own);
if (own.length!= 0)
{
Deal with "|" Here Problem
while (Own.indexof (' | ') &GT;-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 (' This keyword already exists, please search for the image by dragging and dropping the keyword ');
Return
}
}
$ (' #keywordIncluding '). Append ("<a href= ' #c ' value=" +own+ "style= ' Cursor:pointer ' >" + own + "</a>");
$ ('. Add_to_search #AddInput #baohan '). Val (');
}
$ (' #keywordIncluding a '). Draggable ({
Helper: ' Clone '
});
}

Whether the keyword exists

Copy Code code as follows:

function Getexistskeywordarr ()
{
var keyarrresult=[];
$ ("#keywordIncluding a"). each (
function (i,v) {
Keyarrresult.push ($ (v). attr ("value"));
});
$ ("#KeywordContent a"). each (
function (i,v) {
Keyarrresult.push ($ (v). attr ("value"));
});
return keyarrresult;
}

Drag on this implementation if you want to implement the drag search function, add ajax OK!

Let's say the picture "prompt adaptive amplification" effect

A small thumbnail image can be magnified when the mouse is moved:

Thumbnails if the mouse moves out of place while the page is in different places the effect is automatically sensed

Suggest that the magnification should be on the left or right or above or below the browser will not cover very human

Realize

Copy Code code as follows:

<script type= "Text/javascript" src= "Js/jquery.tooltip.js" ></script>
<li>
<span class= "img" >
<a href= "#" > </a>
</span>
</li>

Hint effect

Copy Code code as follows:

<script type= "Text/javascript" >
$ (". IMG img"). ToolTip ({
Track:true,
delay:1000,
Showurl:false,
Bodyhandler:function () {
Return $ ("}
});
</script>

Complete! Demo Effect: http://www.quanjing.com/FrameSet.aspx?SearchType=7&SearchTab=G2&CEFlag=1

Author: Zengxiang exhibition
Source:http://zengxiangzhan.cnblogs.com/