Jump to content

JS save div pozīciju mobīlajās ierīcēs


Recommended Posts

MartinsBe

Sveiciens. Tiek veidota neliela aplikācija ar html/php/js, kur lapā ir 20+div elementi, kuri pc versijā ir ar peli velkami, un katra pozīcija saglabajas localstorage. Šobrīd ir radies jautājums kā saglabāt šīs pozīcijas uz planšetes, lai darbojas uz touch? esmu vairakus variantus izmēģinājis, bet nestrādā. 

<?php
	for ($i=1; $i < 21; $i++) { 
   	 echo "<div id=\"strops".$i."\" class=\"strops ui-widget-content\">".anchor('admin/stropi_detailed/'.$i, 'Strops '.$i)."<input type=\"checkbox\" 	class=\"atdal\" id=\"check".$i."\" name=\"check".$i."\" ></div>";
	}
?>
//šis kods izveido elementus.

<script>
			$(function(){
			var sPositions = localStorage.positions || "{}",
			    positions = JSON.parse(sPositions);
				$.each(positions, function (id, pos) {
			    $("#" + id).css(pos)
			})
			for (var i = 1; i < 21; i++) {
				$("#strops"+i).draggable({
					containment: "#content",
			    	scroll: false,
			    	stop: function (event, ui) {
			        positions[this.id] = ui.position
			        localStorage.positions = JSON.stringify(positions)
			    }
				});
			};
<script>

šis ir kods priekš pc ar peles darbībām, kas darbojas

Link to post
Share on other sites
Artanis

La izmantotu jQuery .draggable un nepārrakstītu savu kodu, vienkārši uziec šo pluginu http://touchpunch.furf.com/


Atceries, ka paredzi dizainā whitespace apkārt draggable elementiem, lai cilvēks var arī normāli pascrollēt.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...