Javascript：尝试使图像可拖动并比较对象

时间：2015-09-15 01:27:54

标签： javascript html css

在这里堆叠社交新手。

我正在开发一个网络项目，它基本上是一个益智游戏，教会人们如何为计算机配置部件。认为pcpartpicker遇到了一个难题，但没有购买。

我创建了几个具有不同元素的javascript对象，我计划通过元素进行比较。 （例如，Motherboard对象有socket元素，CPU有一个socket元素，这些元素必须匹配才能继续）。

单击导航中的对象时。菜单，出现相应图片的点击事件。我想把这张照片拖得可以。最终目标是将所有图片拖放到一起并比较元素以确保一切正常，如果对象与警报不匹配，则会告诉用户其错误。

这是jsfiddle：http://jsfiddle.net/ciddo/sgf50j96/9/

HTML +的Javascript 

     <title>Practice</title>
 <link rel="stylesheet" href="css/style.css" type="text/css" />
<!--[if lt IE 8]>
    <script src ="http://ie7-        js.googlecode.com/svn/version/2.1(beta2)/IE8.js"></script>
<![endif]-->    

      <script         src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">       </script>
<header>
<script>
    var img1; //Motherboard
    var img2; //CPU
    var img3; //Memory
            var img4; //Case
            var img5; //Hard Drive
            var img6; //Power Supply       
</script>
<script>
    function preloader() {
        if (document.images) {
     img1 = new Image();
     img2 = new Image();
             img3 = new Image();
             img4 = new Image();
             img5 = new Image();
             img6 = new Image();

    img1.src = "http://i.imgur.com/u4cQogt.jpg"; // Motherboard
    img2.src = "http://i.imgur.com/snLSsMm.png"; // CPU
    img3.src = "http://i.imgur.com/L8jc43K.png?1"; // Memory
            img4.src = "http://i.imgur.com/oP6hsN0.jpg"; // Case
            img5.src = "http://i.imgur.com/WrFaslA.jpg"; // Hard Drive
            img6.src = "http://i.imgur.com/IMhS0uw.jpg";// Power Supply
        }
    }
    function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                    if (oldonload) {
            oldonload();
        }
        func();
        }
    }
}
addLoadEvent(preloader);
</script>
<script> 
function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) { 
ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}


</script>

<script>

//需要调用包含所有电脑零件图像的文件夹

//Variables that are used
var MoboSocket= ['LGA 1155','LGA 1150','LGA 1150','AM2','AM1','AM3'];
var MoboSize = ['ATX_Large','Micro-ATX_Medium','Mini-ITX_Small'];
var MoboMem = ['DDR','DDR2','DDR3','DDR4'];
var MoboPower = [25,50,75];
var intel = ['LGA 1155','LGA 1150','LGA 1150'];
var amd = ['AM2','AM1','AM3'];
var cpupower = [90,120,150,175,220];
var caseSize = ['Large','Medium','Small'];
var Memory = ['DDR','DDR2','DDR3','DDR4'];
var ram = [2,4,8,16];
var Power = [300,400,500,600,700];
var hddSize = [250,500,750,1000];

//Motherboards
var Motherboard = document.createElement("IMG");

var Motherboard1 = {
Socket:MoboSocket[Math.floor((Math.random()*MoboSocket.length))], 
Size:MoboSize[Math.floor((Math.random()*MoboSize.length))], 
RAM:MoboMem[Math.floor((Math.random()*MoboMem.length))], 
Power:MoboPower[Math.floor((Math.random()*MoboPower.length))]
}; 

var Motherboard2 = {
Socket:MoboSocket[Math.floor((Math.random()*MoboSocket.length))], 
Size:MoboSize[Math.floor((Math.random()*MoboSize.length))], 
RAM:MoboMem[Math.floor((Math.random()*MoboMem.length))], 
Power:MoboPower[Math.floor((Math.random()*MoboPower.length))]   
};
var Motherboard3 = {
Socket:MoboSocket[Math.floor((Math.random()*MoboSocket.length))], 
Size:MoboSize[Math.floor((Math.random()*MoboSize.length))], 
RAM:MoboMem[Math.floor((Math.random()*MoboMem.length))], 
Power:MoboPower[Math.floor((Math.random()*MoboPower.length))]   
};
var Motherboard4 = {
Socket:MoboSocket[Math.floor((Math.random()*MoboSocket.length))], 
Size:MoboSize[Math.floor((Math.random()*MoboSize.length))], 
RAM:MoboMem[Math.floor((Math.random()*MoboMem.length))], 
Power:MoboPower[Math.floor((Math.random()*MoboPower.length))]   
};    

    //CPU Parts    
var Intel_CPU = {
CPU:"Intel", 
Socket:intel[Math.floor((Math.random()*intel.length))],
Power:cpupower[Math.floor(Math.random()*cpupower.length)]
};


var AMD_CPU = {
CPU:"AMD", 
Socket:amd[Math.floor((Math.random()*amd.length))],
Power:cpupower[Math.floor(Math.random()*cpupower.length)]
};    

//Cases    
var Case1 = {
Size:caseSize[Math.floor((Math.random()*caseSize.length))]
};

var Case2 = {
Size:caseSize[Math.floor((Math.random()*caseSize.length))]
};

//Memory    
var Memory1 = {
Type:Memory[Math.floor((Math.random()*Memory.length))],
Size:ram[Math.floor((Math.random()*ram.length))]
};

var Memory2 = {
Type:Memory[Math.floor((Math.random()*Memory.length))],
Size:ram[Math.floor((Math.random()*ram.length))]
};
var Memory3 = {
Type:Memory[Math.floor((Math.random()*Memory.length))],
Size:ram[Math.floor((Math.random()*ram.length))]
};    

//Power Supply
var Power_Supply1 = {
Wattage:Power[Math.floor((Math.random()*Power.length))]
};
var Power_Supply2 = {
Wattage:Power[Math.floor((Math.random()*Power.length))]
};

//Hard Drives
var Hard_Drive1 = {
Size:hddSize[Math.floor(Math.random()*hddSize.length)]    
};
var Hard_Drive2 = {
Size:hddSize[Math.floor(Math.random()*hddSize.length)]    
};

//Generic Print Functions
function printPart(obj){
var str = "";
for (var x in obj){
    str +="<br>"+obj[x];
}
return str;
};

function printMobo(obj){
var str1 = "<br> Socket: "+obj.Socket;
var str2 = "<br> Size: "+obj.Size;
var str3 = "<br> RAM Type: "+obj.RAM;
var str4 = "<br>"+obj.Power;
var str5 = str1+str2+str3+str4;
return str5;
};

function printCPU(obj){
var str1 = "<br> Type: "+obj.CPU;
var str2 = "<br> Socket: "+obj.Socket;
var str4 = "<br>"+obj.Power;
var str5 = str1+str2+str4;
return str5;
};

</script>      


<script>
// Dragable moveable object code thingy
var ele = document.getElementsByClassName ("Motherboard")[0];
//ele.onmousedown = eleMouseDown;

ele.addEventListener（“mousedown”，eleMouseDown，false）; 

function eleMouseDown () {
stateMouseDown = true;
document.addEventListener ("mousemove" , eleMouseMove , false);
}

function eleMouseMove (ev) {
var pX = ev.pageX;
var pY = ev.pageY;
ele.style.left = pX + "px";
ele.style.top = pY + "px";
document.addEventListener ("mouseup" , eleMouseUp , false);
}

function eleMouseUp () {
document.removeEventListener ("mousemove" , eleMouseMove , false);
document.removeEventListener ("mouseup" , eleMouseUp , false);
}
</script>

<div id="jQuery">
<script>
    $(function(){

    });
</script>
</div>
</header> 


<body>

<div class="">
<ul id="nav">
<li><a href="#">Motherboards</a>
    <ul> 
        <li id="Mobo1"><a href="#">Motherboard 1: 
                <script type="text/javascript">
              document.write(printMobo(Motherboard1));                  
                 </script>Watts
            </a>
        </li>

        <li id="Motherboard2"><a href="#">Motherboard 2: 
                <script type="text/javascript">
                     document.write(printMobo(Motherboard2));
                </script>Watts
            </a>
        </li>

        <li id="Motherboard3"><a href="#">Motherboard 3: 
                <script type="text/javascript">
                      document.write(printMobo(Motherboard3));
                </script>Watts
            </a>
        </li>

        <li id="Motherboard4"><a href="#">Motherboard 4: 
                <script type="text/javascript">
                      document.write(printMobo(Motherboard4));
                </script>Watts
            </a>
        </li>
    </ul>
</li>    

<li><a href="#">CPUs</a>
              <ul> 
                  <li id="CPU1"><a href="#">CPU 1: <script        type="text/javascript">
                      document.write(printCPU(Intel_CPU));
                                  </script>Watts
                      </a>
                  </li>
                  <li id="CPU2"><a href="#">CPU 2: <script    type="text/javascript">
                      document.write(printCPU(AMD_CPU));
                                  </script>Watts
                      </a>
                  </li>                
              </ul>
</li>

<li><a href="#">Memory</a>
                <ul> 
                    <li id="Memory1"><a href="#"><script type="text/javascript">
                        document.write(printPart(Memory1));
                                    </script>GBs
                        </a>
                    </li> 
                    <li id="Memory2"><a href="#"><script type="text/javascript">
                        document.write(printPart(Memory2));
                                    </script>GBs
                        </a>
                    </li>
                    <li id="Memory3"><a href="#"><script type="text/javascript">
                        document.write(printPart(Memory3));
                                    </script>GBs
                        </a>
                    </li> 
                </ul>  

<li><a href="#">Power Supplies</a>
                <ul> 
                    <li id="PSU1"><a href="#"><script type="text/javascript">
                        document.write(printPart(Power_Supply1));
                                    </script>Watts
                        </a>
                    </li>
                    <li id="PSU2"><a href="#"><script type="text/javascript">
                        document.write(printPart(Power_Supply2));
                                    </script>Watts
                        </a>
                    </li>
                </ul>                
            </li>

<li><a href="#">Cases</a>
                <ul> 
                    <li id="Case1"><a href="#"><script type="text/javascript">
                        document.write(printPart(Case1));
                                    </script>
                        </a>
                    </li>
                    <li id="Case2"><a href="#"><script type="text/javascript">
                        document.write(printPart(Case2));
                                    </script>
                        </a>
                    </li>                         
                </ul>                
            </li>

<li><a href="#">Hard Drives</a>
                <ul> 
                    <li id="HDD1"><a href="#"><script type="text/javascript">
                        document.write(printPart(Hard_Drive1));
                                    </script>GB
                        </a>
                    </li>
                    <li id="HDD2"><a href="#"><script type="text/javascript">
                        document.write(printPart(Hard_Drive2));
                                    </script>GB
                        </a>
                    </li>
                </ul>                
            </li>                                                   
</ul>


 <div>    
<script>

    document.getElementById("Mobo1").addEventListener("click", function() { 
        document.body.appendChild(img1);
    });
    document.getElementById("CPU1").addEventListener("click", function() {
        document.body.appendChild(img2);
    });
    document.getElementById("Memory1").addEventListener("click", function()     {
        document.body.appendChild(img3);
    });
    document.getElementById("PSU1").addEventListener("click", function() {
        document.body.appendChild(img6);
    });
    document.getElementById("Case1").addEventListener("click", function() {
        document.body.appendChild(img4);
    });
    document.getElementById("HDD1").addEventListener("click", function() {
        document.body.appendChild(img5);
    });
    document.getElementsById(img1).addEventListener("click", function() {
       alert("This Click worked"); 
    });
</script>
</div>

</body>
</html>

CSS 

    body {
 font-family: helvetica, arial, sans-serif;
 background: #e3e3e3;
 text-align: center;
}

 /* MENU */

#nav {
 background: #e5e5e5;
 float: left;
 margin: 0; padding: 0;
 border: 1px solid white;
 border-bottom: none;
}

#nav li a, #nav li {
 float: left;
}

#nav li {
 list-style: none;
 position: relative;
}

#nav li a {
 padding: 1em 2em;
 text-decoration: none;
 color: white;
 background: #292929;
 background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
 background: -webkit-gradient(linear, left top, left 25, from(black), color-       stop(4%, #3c3c3c), to(#292929));
  border-right: 1px solid #3c3c3c;
  border-left: 1px solid #292929;
 border-bottom: 1px solid #232323;
 border-top: 1px solid #545454;
 }

 #nav li a:hover {
 background: #2a0d65;
 background: -moz-linear-gradient(top, #11032e, #2a0d65);
 background: -webkit-gradient(linear, left top, left bottom, from(#11032e),     to(#2a0d65));
 }


/* Submenu */

.hasChildren {
position: absolute;
width: 5px; height: 5px;
background: black;
right : 0;
bottom: 0;
}

 #nav li ul {
 display: none;
 position: absolute;
 left: 0;
 top: 100%;
 padding: 0; margin: 0;
 }

 #nav li:hover > ul {
  display: block;
 }

 #nav li ul li, #nav li ul li a {
 float: none;
 }

 #nav li ul li {
_display: inline; /* for IE6 */
}

#nav li ul li a {
 width: 150px;
 display: block;
}

/* SUBSUB Menu */

 #nav li ul li ul {
 display: none;
 }

 #nav li ul li:hover ul {
 left: 100%;
 top: 0;
 }


 #nav li ul

0 个答案:

没有答案
相关问题
最新问题