Javascript 选择项目并将其移动到容器中
我试图做的是，用户可以单击一个div容器中的项，如果他单击了，则该项将释放鼠标。然后，他可以将该项放入另一个div中，但前提是所选项的类型与项容器的类型相同。这里我包含了我目前制作的代码 我缺少的东西是：Javascript 选择项目并将其移动到容器中,javascript,html,Javascript,Html,我试图做的是，用户可以单击一个div容器中的项，如果他单击了，则该项将释放鼠标。然后，他可以将该项放入另一个div中，但前提是所选项的类型与项容器的类型相同。这里我包含了我目前制作的代码 我缺少的东西是： <!DOCTYPE html><html><head> <script type="text/javascript" src="scripts/jquery.js"></script> <script type="text/ja
<!DOCTYPE html><html><head>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery_mm.js"></script>
<script>
var item_selected=false;
var item_type=0;
var item_mouseover=false;
function itemclicked(item_id,item_t,e_item){
if(item_selected){return;}
item_selected=e_item;
e_item.style.display="none";
document.getElementById("moover").style.display="";
document.getElementById("moover").src=e_item.src;
item_type=item_t;
$(document).mousemove(function(e){
//$("#moover").show();
$("#moover").css({
top: (e.pageY+15) + "px",
left: (e.pageX+15) + "px"
});
});
}
function itemmouseover_out(type){
if(type==1){item_mouseover=true;}
else{item_mouseover=false;}
}
function mouseovercontainer(container,container_type){
if(item_selected && item_type==container_type && !container.containsitem){
container.style.backgroundColor="blue";
}
else{if(item_selected){
container.style.backgroundColor="red";
}}
}
function mouseoutcontainer(container){
if(item_selected){
container.style.backgroundColor="yellow";
}
}
function containerclick(container,container_type){
if(item_selected && item_type==container_type && !container.containsitem){
container.style.backgroundColor="yellow";
container.containsitem=item_selected;
container.style.backgroundImage='url('+item_selected.src+')';
//$(document).unbind('mousemove');
document.getElementById("moover").style.display="none";
//document.body.style.cursor = 'default';
item_selected=false;
item_type=0;
}
else{if(!item_selected && container.containsitem){
item_selected=container.containsitem;
//e_item.style.display="none";
container.style.backgroundImage="";
document.getElementById("moover").style.display="";
document.getElementById("moover").src=item_selected.src;
item_type=container_type;
container.containsitem="";
$(document).mousemove(function(e){
$("moover").show();
$("#moover").css({
top: (e.pageY+15) + "px",
left: (e.pageX+15) + "px"
});
});
}}
}
function itemscontainer_click(){
if(item_selected && item_mouseover==false){
//$(document).unbind('mousemove');
document.getElementById("moover").style.display="none";
//document.body.style.cursor = 'default';
item_selected.style.display="";
item_selected=false;
item_type=0;
}
}
</script>
</head><body>
<div id="containers_container" style="position:absolute;top:20px;left:20px;border:solid 1px blue;width:300px;height:300px;">
<div id="container1" style="width:50px;height:50px;margin-top:30px;margin-left:30px;border:solid 1px brown;background:yellow;background-repeat:no-repeat;background-position:center;" onmouseout="mouseoutcontainer(this)" onmouseover="mouseovercontainer(this,1)" onclick="containerclick(this,1)"></div>
<div id="container2" style="width:50px;height:50px;margin-top:0px;margin-left:90px;border:solid 1px brown;background:yellow;background-repeat:no-repeat;background-position:center;" onmouseout="mouseoutcontainer(this)" onmouseover="mouseovercontainer(this,1)" onclick="containerclick(this,1)"></div>
<div id="container3" style="width:50px;height:50px;margin-top:0px;margin-left:30px;border:solid 1px brown;background:yellow;background-repeat:no-repeat;background-position:center;" onmouseout="mouseoutcontainer(this)" onmouseover="mouseovercontainer(this,2)" onclick="containerclick(this,2)"></div>
<div id="container4" style="width:50px;height:50px;margin-top:0px;margin-left:90px;border:solid 1px brown;background:yellow;background-repeat:no-repeat;background-position:center;" onmouseout="mouseoutcontainer(this)" onmouseover="mouseovercontainer(this,2)" onclick="containerclick(this,2)"></div>
<div id="container5" style="width:50px;height:50px;margin-top:-20px;margin-left:30px;border:solid 1px brown;background:yellow;background-repeat:no-repeat;background-position:center;" onmouseout="mouseoutcontainer(this)" onmouseover="mouseovercontainer(this,1)" onclick="containerclick(this,1)"></div>
<div id="container6" style="width:50px;height:50px;margin-top:-40px;margin-left:160px;border:solid 1px brown;background:yellow;background-repeat:no-repeat;background-position:center;" onmouseout="mouseoutcontainer(this)" onmouseover="mouseovercontainer(this,2)" onclick="containerclick(this,2)"></div>
</div>
<div id="items_container" style="position:absolute;top:20px;left:330px;border:solid 1px red;width:300px;height:300px;" onclick="itemscontainer_click()">
<img id="item1" style="float:left;width:30px;height:31px;margin:5px;" src="http://www.sakura-house.com/img/icon/house.jpg" onclick="itemclicked(1,1,this)" onmouseover="itemmouseover_out(1)" onmouseout="itemmouseover_out(2)"></img>
<img id="item2" style="float:left;width:48px;height:48px;margin:5px;" src="http://img217.imageshack.us/img217/4286/minicar48en4.png" onclick="itemclicked(2,2,this)" onmouseover="itemmouseover_out(1)" onmouseout="itemmouseover_out(2)"></img>
<img id="item3" style="float:left;width:50px;height:50px;margin:5px;" src="http://www.top-logix.com/pics/thumbs/case-antec900.jpg" onclick="itemclicked(3,1,this)" onmouseover="itemmouseover_out(1)" onmouseout="itemmouseover_out(2)"></img>
</div>
<img id='moover' style='position:absolute;top:0px;left:0px;display:none;'></img>
</body></html>
- 项目暂停鼠标
- 用户可以返回项目
- 如果用户将物品放在容器中，则他可以将其拉出并将其放回第一次放置所有物品的位置，但现在必须是最后一个
- 或者他可以将其拉出并放入另一个与物品类型相同的容器中
<!DOCTYPE html><html><head>
<script>
var item_selected=false;
var item_type=0;
var item_mouseover=false;
function itemclicked(item_id,item_t,e_item){
if(item_selected){return;}
item_selected=e_item;
e_item.style.display="none";
item_type=item_t;
// stick to mouse movements
}
function itemmouseover_out(type){
if(type==1){item_mouseover=true;}
else{item_mouseover=false;}
}
function mouseovercontainer(container,container_type){
if(item_selected && item_type==container_type && !container.containsitem){
container.style.backgroundColor="blue";
}
else{if(item_selected){
container.style.backgroundColor="red";
}}
}
function mouseoutcontainer(container){
if(item_selected){
container.style.backgroundColor="yellow";
}
}
function containerclick(container,container_type){
if(item_selected && item_type==container_type && !container.containsitem){
container.style.backgroundColor="yellow";
container.containsitem=true;
container.style.backgroundImage=item_selected.style.backgroundImage;
item_selected=false;
item_type=0;
}
}
function itemscontainer_click(){
if(item_selected && item_mouseover==false){
// return that item to div which contains all items
item_selected.style.display="";
item_selected=false;
item_type=0;
}
}
</script>
</head><body>
<div id="containers_container" style="position:absolute;top:20px;left:20px;border:solid 1px blue;width:300px;height:300px;">
<div id="container1" style="width:50px;height:50px;margin-top:30px;margin-left:30px;border:solid 1px brown;background:yellow;" onmouseout="mouseoutcontainer(this)" onmouseover="mouseovercontainer
(this,1)" onclick="containerclick(this,1)"></div>
<div id="container2" style="width:50px;height:50px;margin-top:0px;margin-left:90px;border:solid 1px brown;background:yellow;" onmouseout="mouseoutcontainer(this)" onmouseover="mouseovercontainer
(this,1)" onclick="containerclick(this,1)"></div>
<div id="container3" style="width:50px;height:50px;margin-top:0px;margin-left:30px;border:solid 1px brown;background:yellow;" onmouseout="mouseoutcontainer(this)" onmouseover="mouseovercontainer
(this,2)" onclick="containerclick(this,2)"></div>
<div id="container4" style="width:50px;height:50px;margin-top:0px;margin-left:90px;border:solid 1px brown;background:yellow;" onmouseout="mouseoutcontainer(this)" onmouseover="mouseovercontainer
(this,2)" onclick="containerclick(this,2)"></div>
<div id="container5" style="width:50px;height:50px;margin-top:-20px;margin-left:30px;border:solid 1px brown;background:yellow;" onmouseout="mouseoutcontainer(this)" onmouseover="mouseovercontainer
(this,1)" onclick="containerclick(this,1)"></div>
<div id="container6" style="width:50px;height:50px;margin-top:-40px;margin-left:160px;border:solid 1px brown;background:yellow;" onmouseout="mouseoutcontainer(this)" onmouseover="mouseovercontainer
(this,2)" onclick="containerclick(this,2)"></div>
</div>
<div id="items_container" style="position:absolute;top:20px;left:330px;border:solid 1px red;width:300px;height:300px;" onclick="itemscontainer_click()">
<div id="item1" style="float:left;width:30px;height:31px;margin:5px;background-image:url(http://www.sakura-house.com/img/icon/house.jpg);" onclick="itemclicked(1,1,this)"
onmouseover="itemmouseover_out(1)" onmouseout="itemmouseover_out(2)"></div>
<div id="item2" style="float:left;width:48px;height:48px;margin:5px;background-image:url(http://img217.imageshack.us/img217/4286/minicar48en4.png);" onclick="itemclicked(2,2,this)"
onmouseover="itemmouseover_out(1)" onmouseout="itemmouseover_out(2)"></div>
<div id="item3" style="float:left;width:50px;height:50px;margin:5px;background-image:url(http://www.top-logix.com/pics/thumbs/case-antec900.jpg);" onclick="itemclicked(3,1,this)"
onmouseover="itemmouseover_out(1)" onmouseout="itemmouseover_out(2)"></div>
</div>
</body></html>
所选var项目=false；
var项目类型=0；
var item_mouseover=false；
单击的功能项（项id、项t、e项）{
如果（选中项）{return；}
所选项目=e_项目；
e_item.style.display=“无”；
项目类型=项目类型；
//坚持鼠标移动
}
函数项MouseOver_out（类型）{
如果（type==1）{item_mouseover=true；}
else{item_mouseover=false；}
}
功能鼠标越过容器（容器，容器类型）{
if（item_selected&&item_type==container_type&&！container.containsitem）{
container.style.backgroundColor=“蓝色”；
}
else{if（项目_已选定）{
container.style.backgroundColor=“红色”；
}}
}
功能鼠标输出容器（容器）{
如果（已选择项）{
container.style.backgroundColor=“黄色”；
}
}
函数containerclick（容器，容器类型）{
if（item_selected&&item_type==container_type&&！container.containsitem）{
container.style.backgroundColor=“黄色”；
container.containsitem=true；
container.style.backgroundImage=item_selected.style.backgroundImage；
所选项目=假；
项目类型=0；
}
}
函数项容器\单击（）{
如果（选中项目&&item _鼠标悬停==false）{
//将该项返回到包含所有项的div
项目_已选定。样式。显示=”；
所选项目=假；
项目类型=0；
}
}
看看函数我做了一些事情，现在它工作得很好 我使用jQuery和jQuery（New Wave Javascript）进行鼠标移动，“没有它就不能工作：（”。现在我有这样的功能，但我仍然缺少一个东西，我想在使用该项目时隐藏鼠标，所以当你鼠标移过（项目结束）时容器，然后显示它是否可用。问题是，如果我把选定的项目放在光标的中间，那么鼠标总是在那个选定的图像（项目）之上，并且不能鼠标在容器上，那么<强>我将把这个问题打开，以便有人可以看看我现在拥有的东西并给出建议！< /强> 谢谢 jQuery鼠标移动： 当前代码：
<!DOCTYPE html><html><head>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery_mm.js"></script>
<script>
var item_selected=false;
var item_type=0;
var item_mouseover=false;
function itemclicked(item_id,item_t,e_item){
if(item_selected){return;}
item_selected=e_item;
e_item.style.display="none";
document.getElementById("moover").style.display="";
document.getElementById("moover").src=e_item.src;
item_type=item_t;
$(document).mousemove(function(e){
//$("#moover").show();
$("#moover").css({
top: (e.pageY+15) + "px",
left: (e.pageX+15) + "px"
});
});
}
function itemmouseover_out(type){
if(type==1){item_mouseover=true;}
else{item_mouseover=false;}
}
function mouseovercontainer(container,container_type){
if(item_selected && item_type==container_type && !container.containsitem){
container.style.backgroundColor="blue";
}
else{if(item_selected){
container.style.backgroundColor="red";
}}
}
function mouseoutcontainer(container){
if(item_selected){
container.style.backgroundColor="yellow";
}
}
function containerclick(container,container_type){
if(item_selected && item_type==container_type && !container.containsitem){
container.style.backgroundColor="yellow";
container.containsitem=item_selected;
container.style.backgroundImage='url('+item_selected.src+')';
//$(document).unbind('mousemove');
document.getElementById("moover").style.display="none";
//document.body.style.cursor = 'default';
item_selected=false;
item_type=0;
}
else{if(!item_selected && container.containsitem){
item_selected=container.containsitem;
//e_item.style.display="none";
container.style.backgroundImage="";
document.getElementById("moover").style.display="";
document.getElementById("moover").src=item_selected.src;
item_type=container_type;
container.containsitem="";
$(document).mousemove(function(e){
$("moover").show();
$("#moover").css({
top: (e.pageY+15) + "px",
left: (e.pageX+15) + "px"
});
});
}}
}
function itemscontainer_click(){
if(item_selected && item_mouseover==false){
//$(document).unbind('mousemove');
document.getElementById("moover").style.display="none";
//document.body.style.cursor = 'default';
item_selected.style.display="";
item_selected=false;
item_type=0;
}
}
</script>
</head><body>
<div id="containers_container" style="position:absolute;top:20px;left:20px;border:solid 1px blue;width:300px;height:300px;">
<div id="container1" style="width:50px;height:50px;margin-top:30px;margin-left:30px;border:solid 1px brown;background:yellow;background-repeat:no-repeat;background-position:center;" onmouseout="mouseoutcontainer(this)" onmouseover="mouseovercontainer(this,1)" onclick="containerclick(this,1)"></div>
<div id="container2" style="width:50px;height:50px;margin-top:0px;margin-left:90px;border:solid 1px brown;background:yellow;background-repeat:no-repeat;background-position:center;" onmouseout="mouseoutcontainer(this)" onmouseover="mouseovercontainer(this,1)" onclick="containerclick(this,1)"></div>
<div id="container3" style="width:50px;height:50px;margin-top:0px;margin-left:30px;border:solid 1px brown;background:yellow;background-repeat:no-repeat;background-position:center;" onmouseout="mouseoutcontainer(this)" onmouseover="mouseovercontainer(this,2)" onclick="containerclick(this,2)"></div>
<div id="container4" style="width:50px;height:50px;margin-top:0px;margin-left:90px;border:solid 1px brown;background:yellow;background-repeat:no-repeat;background-position:center;" onmouseout="mouseoutcontainer(this)" onmouseover="mouseovercontainer(this,2)" onclick="containerclick(this,2)"></div>
<div id="container5" style="width:50px;height:50px;margin-top:-20px;margin-left:30px;border:solid 1px brown;background:yellow;background-repeat:no-repeat;background-position:center;" onmouseout="mouseoutcontainer(this)" onmouseover="mouseovercontainer(this,1)" onclick="containerclick(this,1)"></div>
<div id="container6" style="width:50px;height:50px;margin-top:-40px;margin-left:160px;border:solid 1px brown;background:yellow;background-repeat:no-repeat;background-position:center;" onmouseout="mouseoutcontainer(this)" onmouseover="mouseovercontainer(this,2)" onclick="containerclick(this,2)"></div>
</div>
<div id="items_container" style="position:absolute;top:20px;left:330px;border:solid 1px red;width:300px;height:300px;" onclick="itemscontainer_click()">
<img id="item1" style="float:left;width:30px;height:31px;margin:5px;" src="http://www.sakura-house.com/img/icon/house.jpg" onclick="itemclicked(1,1,this)" onmouseover="itemmouseover_out(1)" onmouseout="itemmouseover_out(2)"></img>
<img id="item2" style="float:left;width:48px;height:48px;margin:5px;" src="http://img217.imageshack.us/img217/4286/minicar48en4.png" onclick="itemclicked(2,2,this)" onmouseover="itemmouseover_out(1)" onmouseout="itemmouseover_out(2)"></img>
<img id="item3" style="float:left;width:50px;height:50px;margin:5px;" src="http://www.top-logix.com/pics/thumbs/case-antec900.jpg" onclick="itemclicked(3,1,this)" onmouseover="itemmouseover_out(1)" onmouseout="itemmouseover_out(2)"></img>
</div>
<img id='moover' style='position:absolute;top:0px;left:0px;display:none;'></img>
</body></html>
所选var项目=false；
var项目类型=0；
var item_mouseover=false；
单击的功能项（项id、项t、e项）{
如果（选中项）{return；}
所选项目=e_项目；
e_item.style.display=“无”；
document.getElementById（“moover”）.style.display=“”；
document.getElementById（“moover”）.src=e_item.src；
项目类型=项目类型；
$（文档）.mousemove（函数（e）{
//$（“#moover”）.show（）；
$（“#moover”）.css({
顶部：（e.pageY+15）+“px”，
左：（e.pageX+15）+“px”
});
});
}
函数项MouseOver_out（类型）{
如果（type==1）{item_mouseover=true；}
else{item_mouseover=false；}
}
功能鼠标越过容器（容器，容器类型）{
if（item_selected&&item_type==container_type&&！container.containsitem）{
container.style.backgroundColor=“蓝色”；
}
else{if（项目_已选定）{
container.style.backgroundColor=“红色”；
}}
}
功能鼠标输出容器（容器）{
如果（已选择项）{
container.style.backgroundColor=“黄色”；
}
}
函数containerclick（容器，容器类型）{
if（item_selected&&item_type==container_type&&！container.containsitem）{
container.style.backgroundColor=“黄色”；
container.containsitem=所选项目；
container.style.backgroundImage='url（'+item_selected.src+'）；
//$（文档）.unbind（'mousemove'）；
document.getElementById（“moover”）.style.display=“无”；
//document.body.style.cursor='default'；
所选项目=假；
项目类型=0；
}
else{if（！item_selected&&container.containsitem）{
所选项目=container.containsitem；
//e_item.style.display=“无”；
container.style.backgroundImage=“”；
document.getElementById（“moover”）.style.display=“”；
document.getElementById（“moover”）.src=item_selected.src；
物料类型=容器类型；
container.containsitem=“”；
$（文档）.mousemove（函数（e）{
$（“moover”）.show（）；
$（“#moover”）.css({
顶部：（e.pageY+15）+“px”，
左：（e.pageX+15）+“px”
});
});
}}
}
函数项容器\单击（）{
如果（选中项目&&item _鼠标悬停==false）{
//$（文档）.unbind（'mousemove'）；
document.getElementById（“moover”）.style.display=“无”；
//document.body.style.cursor='default'；
项目_已选定。样式。显示=”；
所选项目=假；
项目类型=0；
}
}