How to make two frames drag together?(jQuery)_问答_开发者

I'm working on a whack-a-mole project in javascript/jQuery and I'd like to have users be able to drag the holes to where they'd like on the screen and then press start to start playing(the moles start popping out of the holes) However, first I need a start button that does this and second I need both of these images to move together, at the moment when I implement this jQuery code

<SCRIPT>
$(document).ready(function(){
$("#div").draggable();
});
</SCRIPT>

under the divs, it all becomes draggable, but they don't drag together for obvious reasons. For example, when I move the hole .gif to a different position, the mole .gif stays in it's original position. I need them to move together. As for the start button, it should be relatively simple, but I can't figure out how to get the function to not run on load, and only run on button click. Anyway, here's my current project, it's quite sloppy, I know. :P

<html>
<body>

<!--CURSOR-->
<style type="text/css">
body, a, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-5/oth438.cur),
progress;}
</style>
<!--BACKGROUND-->
<body background = "http://i52.tinypic.com/34e9ekj.jpg">

<!--COUNTER(needs to be implemnted)-->
<b><center><font size="5"><div id='counter'>0</div></font></center><b>

<!--TITLE-->
<b><center><i>Whack-A-Mole</i> - by Steven</center></b>

<!--HOLE IMAGES START HERE-->

<!--Hole 1 Row 1-->
<img src ='http://i51.tinypic.com/sxheeo.gif' style="margin-left:33px;margin-top:37px;position:absolute"/>

<!--Hole 2 Row 1-->
<img src="http://i51.tinypic.com/sxheeo.gif" style="margin-left:350px;margin-top:37px;position:absolute"/>

<!--Hole 3 Row 1-->
<img src ='http://i51.tinypic.com/sxheeo.gif' style="margin-left:700px;margin-top:37px;position:absolute"/>

<!--Hole 4 Row 2-->
<img src="http://i51.tinypic.com/sxheeo.gif" style="margin-left:33px;margin-top:200px;position:absolute"/>

<!--Hole 5 Row 2-->
<img src ='http://i51.tinypic.com/sxheeo.gif' style="margin-left:350px;margin-top:200px;position:absolute"/>

<!--Hole 6 Row 2-->
<img src ='http://i51.tinypic.com/sxheeo.gif' style="margin-left:700px;margin-top:200px;position:absolute"/>

<!--Hole 7 Row 3-->
<img src ='http://i51.tinypic.com/sxheeo.gif' style="margin-left:33px;margin-top:350px;position:absolute"/>

<!--Hole 8 Row 3-->
<img src ='http://i51.tinypic.com/sxheeo.gif' style="margin-left:350px;margin-top:350px;position:absolute"/>

<!--Hole 9 Row 3-->
<img src ='http://i51.tinypic.com/sxheeo.gif' style="margin-left:700px;margin-top:350px;position:absolute"/>
<!--HOLE IMAGES END HERE-->

<!--MOLE DIVS START HERE-->

<!--Mole 1 Row 1-->
<div id="randomdiv1" 
class="mole">
<img src="http://i56.tinypic.com/2i3tyw.gif" style="margin-left:33px;margin-top:37px;position:absolute"/>
</div>

<!--Mole 2 Row 1-->
<div id="randomdiv2" 
class="mole">
<img id="Mole1" src ='http://i56.tinypic.com/2i3tyw.gif' style="margin-left:350px;margin-top:37px;position:absolute"/>
</div>

<!--Mole 3 Row 1-->
<div id="randomdiv3" 
class="mole">
<img id="Mole2" src ='http://i56.tinypic.com/2i3tyw.gif' style="margin-left:700px;margin-top:37px;position:absolute"/>
</div>

<!--Mole 4 Row 2-->
<div id="randomdiv4" 
class="mole">
<img id="Mole3" src ='http://i56.tinypic.com/2i3tyw.gif' style="margin-left:33px;margin-top:200px;position:absolute"/>
</div>

<!--Mole 5 Row 2-->
<div id="randomdiv5" 
class="mole">
<img id="Mole4" src ='http://i56.tinypic.com/2i3tyw.gif' style="margin-left:350px;margin-top:200px;position:absolute"/>
</div>

<!--Mole 6 Row 2-->
<div id="randomdiv6" 
class="mole">
<img id="Mole5" src ='http://i56.tinypic.com/2i3tyw.gif' style="margin-left:700px;margin-top:200px;position:absolute"/>
</div>

<!--Mole 7 Row 3-->
<div id="randomdiv7" 
class="mole">
<img id="Mole6" src="http://i56.tinypic.com/2i3tyw.gif" style="margin-left:33px;margin-top:350px;position:absolute"/>
</div>

<!--Mole 8 Row 3-->
<div id="randomdiv8" 
class="mole">
<img id="Mole8" src ='http://i56.tinypic.com/2i3tyw.gif' style="margin-left:350px;margin-top:350px;position:absolute"/>
</div>

<!--Mole 9 Row 3-->
<div id="randomdiv9" 
class="mole">
<img id="Mole9" src ='http://i56.tinypic.com/2i3tyw.gif' style="margin-left:700px;margin-top:350px;position:absolute"/>
</div>
</body>

<!--MOLE DIVS END HERE-->

<head>
<script type="text/javascript" language="JavaScript"><!--
// Type the number of div containers to randomly display below.

NumberOfDivsToRandomDisplay = 9;

var CookieName = 'DivRamdomValueCookie';
function DisplayRandomDiv() {
var r = Math.ceil(Math.random() * NumberOfDivsToRandomDisplay);
if(NumberOfDivsToRandomDisplay > 1) {
   var ck = 0;
   var cookiebegin = document.cookie.indexOf(CookieName + "=");
   if(cookiebegin > -1) {
      cookiebegin += 1 + CookieName.length;
      cookieend = document.cookie.indexOf(";",cookiebegin);
      if(cookieend < cookiebegin) { cookieend = document.cookie.length; }开发者_如何学编程
      ck = parseInt(document.cookie.substring(cookiebegin,cookieend));
      }
   while(r == ck) { r = Math.ceil(Math.random() * NumberOfDivsToRandomDisplay); }
   document.cookie = CookieName + "=" + r;
   }
for( var i=1; i<=NumberOfDivsToRandomDisplay; i++) {
   document.getElementById("randomdiv"+i).style.display="none";
   }

<!--Make counter +1 on mole click-->

document.getElementById("randomdiv"+r).onclick = function() {
            counter.innerHTML = parseInt(counter.innerHTML) + 1;
        }
document.getElementById("randomdiv"+r).style.display="block";
}
<!--Make moles pop up randomly on a timer-->
DisplayRandomDiv()
setInterval("DisplayRandomDiv()",(Math.random()*500) + 1000);
//--></script>
</head>
</html>

If it's not possible, then oh well, I'll have to go about it a different way. If you need more information, just comment, thanks!

Check out the helper option of draggable.

I'm guessing you can do something like this:

helper: function(event) {
   var $holeMoleContainer = '<div></div>';
   $holeMoleContainer.append($('#holeImage'), $('#moleDiv'));
   return $holeMoleContainer;
}

This is just psuedo-code and I've never actually done that. I've done simpler things like this where a new element is created and is dragged:

helper: function(event) {
   return $('<div>I\'m being dragged!</div>');
}

I think you've got a few issues in your markup code that could be done better and make things easier for yourself.

Firstly I would put the hole and the mole in the div like so:

<div class="mole">
    <img class="hole" src ="http://i51.tinypic.com/sxheeo.gif"/>
    <img class="mole" src="http://i56.tinypic.com/2i3tyw.gif"/>
</div>

then i would clone this and add an id ... something like:

function CreateMoles(rows, cols) 
{
    var blankMole = $('<div class="mole"> <img class="hole" src ="http://i51.tinypic.com/sxheeo.gif"/><img class="mole" src="http://i56.tinypic.com/2i3tyw.gif"/> </div>');

    for (var rownumber = 1; rownumber <= rows; rownumber++)
    {
        for (var colnumber = 1; colnumber <= cols; colnumber ++)
        {
            var newMole = blankMole.clone();
            newMole.attr("id", "randomdiv" + (rownumber * colnumber))
                .css({left: (100 * (colnumber -1)), top: (100 * (rownumber -1))});
            $("#moles").append(newMole);
        }
    }
}

The javascript could also be cleaned:

$(document).ready(function() {
    $("div").draggable();
    $("div.mole").click(function() {
        if($(this).data("state") == "up")
        {
            var counter = $("#counter");
            counter.data("counter", counter.data("counter") +1);
            counter.text(counter.data("counter"));
        }
    });

    DisplayRandomDiv()
    window.setInterval("DisplayRandomDiv()", (Math.random() * 500) + 1000);
});

What this does is only set one click event and saves you setting / unsetting it.

In the DisplayRandomDiv() after all the cookie stuff :

$("div.mole img.mole").hide();
$("div.mole").data("state", "down");


$("#randomdiv" + r + " img.mole").show();    
$("#randomdiv" + r).data("state", "up");

Now you are using jQuery more (less plain Javascript) and you can change the number of moles there are, and they all drag together. (you will have to put some styling in there that I'm missing but it can't be too hard)

Basically working jsfiddle: http://jsfiddle.net/TEUSA/5/

UPDATE:-

I found an error in the code. the newMolew.attr("id", ... line should have ((rownumber - 1) * cols + colnumber) instead of (rownumber * colnumber).