选择项目并将其移至容器

时间：2011-01-29 22:03:34

标签： javascript html

我想要做的是用户可以点击一个div容器中的项目，如果他点击，那么该项目允许鼠标。然后他可以将该项目放在另一个div中，但前提是所选项目与项目容器的类型相同。这里我包含了我目前制作的代码。

我遗失的事情是：

  • item fallows the mouse
  • 用户可以返回项目
    • 如果用户将物品放入容器，那么他可以将其拉出并将其放回原处所有物品的位置但现在必须是最后一个
    • 或者他可以把它拉出来并放到与物品类型相同的另一个容器中

这是HTML和JS代码。

<!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>

2 个答案:

答案 0 :(得分：1)

jQuery UI将使这更容易，看看

查看droppable函数

答案 1 :(得分：0)

我做了一些事情，现在工作得很好！

我使用jQuery和jQuery（New Wave Javascript）进行鼠标移动“没有它不起作用:(”。现在我有这样的但是我仍然想念一个我想隐藏鼠标的东西，而这个项目是在使用中，当你 mouseover （item over）容器时，它会显示它是否可用。问题是如果我将所选项目放在光标中间，那么鼠标总是在所选图像上方（项目）并且无法将容器移到容器上！ 我会将此问题保持打开状态，以便有人可以查看我现在拥有的内容并提出建议！

谢谢！

jQuery鼠标移动： jQuery New wave

当前代码： 

<!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>
相关问题
最新问题