开发者

Select item and move it to container

问答 作者：

What I am trying to do is that user can click on item in one div container and if he clicked then that item fallows mouse. And then he can put that item inside another div but only if the selected item is same type as item container is. Here I include code which I currently made.

Things I am missing are:

  • item fallows the mouse
  • user can return item back
    • if user placed item to container then he can pull it out and put it back where are all items at first time but it now have to be the last one
    • or he can pull it out and put to another container wich is same type as item

Here is the HTML and JS code.

<!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="i开发者_运维百科temmouseover_out(1)" onmouseout="itemmouseover_out(2)"></div>
</div>
</body></html>

jQuery UI will make this a lot easier, look at the

Look at the droppable function

I did something and for now its working great!

I used jQuery and jQuery(New Wave Javascript) for mouse movement "without it dont works :(". Well for now i have it like that but i still missing a thing that i would like to hide mouse while this item is in use so when you mouseover(item over) container then it shows if its available or not. Problem is that if i place selected item in the middle of the cursor then mouse is always over that selected image(item) and cant mouseover the container then! I will leave this question open so someone can take a look at what i have now and give suggestions!

Thanks!

jQuery Mouse Movement: jQuery New wave

Current code:

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

继续阅读：javascript

更多精彩内容

0

上一篇:

下一篇:

精彩评论

暂无评论...
登录 注册
Qedev.com
验证码 换一张
取 消

最新问答

问答排行榜

法律声明：本站内容均为网友上传，网站举办方负责审核和监督，

如存在版权或非法内容，欢迎举报，我们将尽快予以删除。

Copyright © 2018-2020 开发者. All rights reserved.

Powered by 开发者

ICP备案号： 京ICP备10032868号-9