Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <style>
- b[data-type=puzzle], div[data-type=puzzle] {
- width: 280px;
- height: 50px;
- border: 1px solid black;
- display: inline-block;
- margin: 0px;
- padding: 0px;
- zoom: 0.85;
- }
- img {
- width: 280;
- height: 50;
- margin: 0px;
- padding: 0px;
- }
- #all {
- display: flex;
- justify-content:space-between;
- }
- #left { flex: 1500px 0 0; }
- #right { flex: 400px 1 1; }
- </style>
- <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>
- <div id="all">
- <div id="left">
- <div ondragover="allowDrop(event)" ondrop("allowDrop(event)") data-type="puzzle"></div>
- <div ondragover="allowDrop(event)" ondrop("allowDrop(event)") data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div><br>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div><br>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div><br>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div><br>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div><br>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div><br>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div><br>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div><br>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div><br>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div><br>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div><br>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div><br>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div><br>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div><br>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div><br>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div><br>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div><br>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div><br>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div><br>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div>
- <div data-type="puzzle"></div><br>
- </div>
- <div id="right">
- <div ondrop="drop(event)" ondragover="allowDrop(event)" data-type="puzzle"><img ondragstart="drag(event);" dragable="true" src="puzzle/teil11.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil12.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil13.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil14.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil15.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil16.png"></div><br>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil21.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil22.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil23.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil24.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil25.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil26.png"></div><br>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil31.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil32.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil33.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil34.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil35.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil36.png"></div><br>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil41.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil42.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil43.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil44.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil45.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil46.png"></div><br>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil51.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil52.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil53.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil54.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil55.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil56.png"></div><br>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil61.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil62.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil63.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil64.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil65.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil66.png"></div><br>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil71.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil72.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil73.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil74.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil75.png"></div>
- <div data-type="puzzle"><img dragable="true" src="puzzle/teil76.png"></div><br>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil81.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil82.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil83.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil84.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil85.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil86.png"></b><br>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil91.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil92.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil93.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil94.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil95.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil96.png"></b><br>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil101.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil102.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil103.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil104.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil105.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil106.png"></b><br>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil111.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil112.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil113.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil114.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil115.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil116.png"></b><br>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil121.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil122.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil123.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil124.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil125.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil126.png"></b><br>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil131.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil132.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil133.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil134.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil135.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil136.png"></b><br>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil141.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil142.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil143.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil144.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil145.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil146.png"></b><br>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil151.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil152.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil153.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil154.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil155.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil156.png"></b><br>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil161.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil162.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil163.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil164.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil165.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil166.png"></b><br>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil171.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil172.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil173.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil174.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil175.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil176.png"></b><br>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil181.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil182.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil183.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil184.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil185.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil186.png"></b><br>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil191.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil192.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil193.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil194.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil195.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil196.png"></b><br>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil201.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil202.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil203.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil204.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil205.png"></b>
- <b data-type="puzzle"><img dragable="true" src="puzzle/teil206.png"></b><br>
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement