jquery div to div (image movement) ,update db.

Discutii legate de AJAX, jQuery, MooTools, Prototype, Dojo, Yahoo! UI Library,script.aculo.us, ExtJS,AngularJS, Backbone.js, Ember.js, KnockoutJS

Moderator: Moderatori

Avatar utilizator
quadmachine
Senior Member
Mesaje: 798
Membru din: Sâm Iul 10, 2010 4:58 pm
Localitate: Ploiesti
Contact:

jquery div to div (image movement) ,update db.

Mesajde quadmachine » Sâm Noi 17, 2012 4:20 pm

Exista posibilitatea in jquery ca ducand o imagine dintr-un div in alt div sa fac update in db,numai atunci cand userul face release la imagine in acel div.M-am documentat mai intai si nu prea am gasit rezultate,cu drop down cred ca se poate face dar oare cum?:-?

Sunt bomba in javascript,stiu sa fac o functie de alert si nimic mai mult :|.

LE: Am gasit un drag and drop interesant dar cum fac un event cand acel div este tras in alt div?:-?

http://threedubmedia.com/code/event/drag/demo/proxy


Cod: Selectaţi tot

Nu confundati femeia de serviciu cu profesoara de Limba si Literatura Romana.

Avatar utilizator
virus
Average Member
Mesaje: 153
Membru din: Dum Feb 27, 2011 3:16 pm
Localitate: Timisoara
Contact:

Re: jquery div to div (image movement) ,update db.

Mesajde virus » Dum Noi 18, 2012 11:38 am

Cod: Selectaţi tot


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drag and Drop for quadmachine</title>

<style>
div {border:1px solid #000000; margin-right:10px; padding:5px; width:200px; height:200px; float:left;}
#start {background:#3F3}
div img {width:200px; height:200px; border:#F00 1px;}
</style>

<script type="text/javascript">
   function allowDrop(ev){
      ev.preventDefault();
   }
   
   function drag(ev){
      ev.dataTransfer.setData("Text",ev.target.id);
   }
   
   function drop(ev, div){
      ev.preventDefault();
      var data=ev.dataTransfer.getData("Text");
      ev.target.appendChild(document.getElementById(data));
      alert("Poza --> Drag-n-Drop --> DIV " +div.id);
      //$.post("{SITE_URL}/updateDb", { idPoza : div.childNodes[0].id , idDiv : div.id } );
   }
</script>
</head>

<body>

<div id="start" ><img id="poza" src="link_spre_poza.jpg" draggable="true" ondragstart="drag(event);" /></div>
<div id="1" ondrop="drop(event, this);" ondragover="allowDrop(event);" ></div>
<div id="2" ondrop="drop(event, this);" ondragover="allowDrop(event);" ></div>
<div id="3" ondrop="drop(event, this);" ondragover="allowDrop(event);" ></div>

</body>
</html>



Lasa un mesaj daca ai nevoie de ajutor mai departe ! :)

L.E. Nu functioneaza in IE
echo ($busy === TRUE) ? "F**k Off" : "Hello. Can I help You?" ;

Sekundes
PHPRomania Supporter
Mesaje: 29
Membru din: Joi Iun 16, 2011 5:53 pm

Re: jquery div to div (image movement) ,update db.

Mesajde Sekundes » Dum Noi 18, 2012 12:51 pm

Se poate face foarte usor cu

http://jqueryui.com/sortable/

ai listenere pe eventuri si ai actiuni ajax :p

http://api.jqueryui.com/sortable/

Avatar utilizator
quadmachine
Senior Member
Mesaje: 798
Membru din: Sâm Iul 10, 2010 4:58 pm
Localitate: Ploiesti
Contact:

Re: jquery div to div (image movement) ,update db.

Mesajde quadmachine » Dum Noi 18, 2012 1:10 pm

Am reusit pana la urma, dar cum pot face ca elementul sa ramana in div-ul cu drop event un anumit timp?

Cod: Selectaţi tot

Nu confundati femeia de serviciu cu profesoara de Limba si Literatura Romana.

Sekundes
PHPRomania Supporter
Mesaje: 29
Membru din: Joi Iun 16, 2011 5:53 pm

Re: jquery div to div (image movement) ,update db.

Mesajde Sekundes » Dum Noi 18, 2012 4:30 pm

pai ma gandesc ca la listenerul de stop poti pune un settimeout care sa sa faca un revert sau ceva de genul :)

Avatar utilizator
virus
Average Member
Mesaje: 153
Membru din: Dum Feb 27, 2011 3:16 pm
Localitate: Timisoara
Contact:

Re: jquery div to div (image movement) ,update db.

Mesajde virus » Mar Noi 20, 2012 10:26 am

Care varianta ai folosit-o ? Cea data de mine sau http://jqueryui.com/sortable/ ?

Poti sa postezi si codul , ca sa te putem ajuta :)
echo ($busy === TRUE) ? "F**k Off" : "Hello. Can I help You?" ;

Avatar utilizator
quadmachine
Senior Member
Mesaje: 798
Membru din: Sâm Iul 10, 2010 4:58 pm
Localitate: Ploiesti
Contact:

Re: jquery div to div (image movement) ,update db.

Mesajde quadmachine » Mar Noi 20, 2012 6:47 pm

Cod: Selectaţi tot

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/--version--/jquery.min.js"></script>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

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

$('#drag1').draggable();

function drop(ev,id)
{
 var message = '';

ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));


                  $.ajax({
                  type: 'POST',
                  url: 'box.php?method=handler&u_interfaceid='+id,
                  data: data,
                  dataType: 'html',
                  success: function (response) {
                  if(response.status === "success") {
                         message+response.status;
                   } else if(response.status === 'WHOAAA error') {
                         message+response.status;
                                             }
                   }
                  });
                 
      alert("Hurayyy");


}
</script>

<style>
        #div1 {
         width: 140px;
         height: 140px;
         border: 1px solid #efefef;
         background: url('http://us.cdn2.123rf.com/168nwm/roystudio/roystudio1209/roystudio120900102/15355000-white-canvas-fabric-texture-background-with-seamless-grid-pattern-may-use-for-scrapbooking.jpg');
         padding: 10px;
        }
       
        #drag1 {
         border: 1px solid #efefef;
         padding: 10px;
        }

</style>
</head>

</head>
<body>

<div id="div1" ondrop="drop(event,21)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="http://cdn1.iconfinder.com/data/icons/HTML5/128/HTML_Logo.png" draggable="true" ondragstart="drag(event)">

Cod: Selectaţi tot

Nu confundati femeia de serviciu cu profesoara de Limba si Literatura Romana.

Avatar utilizator
virus
Average Member
Mesaje: 153
Membru din: Dum Feb 27, 2011 3:16 pm
Localitate: Timisoara
Contact:

Re: jquery div to div (image movement) ,update db.

Mesajde virus » Mar Noi 20, 2012 7:56 pm

Am reusit pana la urma, dar cum pot face ca elementul sa ramana in div-ul cu drop event un anumit timp?


Pai imaginea ramane in divul in care ii faci drop pana cand faci refresh la pagina , asa cum e normal;
Tu cat timp ai vrea sa ramana acolo ?
echo ($busy === TRUE) ? "F**k Off" : "Hello. Can I help You?" ;

Avatar utilizator
quadmachine
Senior Member
Mesaje: 798
Membru din: Sâm Iul 10, 2010 4:58 pm
Localitate: Ploiesti
Contact:

Re: jquery div to div (image movement) ,update db.

Mesajde quadmachine » Mar Noi 20, 2012 8:38 pm

Timp de 24 ore, deci eu setez un cookie de 24 ore si dupa ce expira cookie-ul meu sa revina si imaginea la loc.:)

Cod: Selectaţi tot

Nu confundati femeia de serviciu cu profesoara de Limba si Literatura Romana.

Avatar utilizator
virus
Average Member
Mesaje: 153
Membru din: Dum Feb 27, 2011 3:16 pm
Localitate: Timisoara
Contact:

Re: jquery div to div (image movement) ,update db.

Mesajde virus » Mar Noi 20, 2012 8:57 pm

Cod: Selectaţi tot

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/--version--/jquery.min.js"></script>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

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

$('#drag1').draggable();

function drop(ev,id)
{
 var message = '';

ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));


              /*    $.ajax({
                  type: 'POST',
                  url: 'box.php?method=handler&u_interfaceid='+id,
                  data: data,
                  dataType: 'html',
                  success: function (response) {
                  if(response.status === "success") {
                         message+response.status;
                   } else if(response.status === 'WHOAAA error') {
                         message+response.status;
                                             }
                   }
                  });
                  */
      alert("Hurayyy");


}
</script>

<style>
        #div1 {
         width: 140px;
         height: 140px;
         border: 1px solid #efefef;
         background: url('http://us.cdn2.123rf.com/168nwm/roystudio/roystudio1209/roystudio120900102/15355000-white-canvas-fabric-texture-background-with-seamless-grid-pattern-may-use-for-scrapbooking.jpg');
         padding: 10px;
        }
       
        #drag1 {
         border: 1px solid #efefef;
         padding: 10px;
        }

</style>
</head>

</head>
<body>
<?php
if (COOKIE_EXISTS) { ?>
<div id="div1" ondrop="drop(event,21)" ondragover="allowDrop(event)">
   <img id="drag1" src="http://cdn1.iconfinder.com/data/icons/HTML5/128/HTML_Logo.png" draggable="true" ondragstart="drag(event)">
</div>
<?php } else { ?>
<div id="div1" ondrop="drop(event,21)" ondragover="allowDrop(event)">
</div>
<img id="drag1" src="http://cdn1.iconfinder.com/data/icons/HTML5/128/HTML_Logo.png" draggable="true" ondragstart="drag(event)">
<?php } ?>

<br>

</body>
</html>


Ar trebui sa functioneze :)
Poti sa setezi cookie-ul in momentul in care faci drop

Pui tu conditia in if ; eu doar ti-am dat un exemplu
echo ($busy === TRUE) ? "F**k Off" : "Hello. Can I help You?" ;

Avatar utilizator
quadmachine
Senior Member
Mesaje: 798
Membru din: Sâm Iul 10, 2010 4:58 pm
Localitate: Ploiesti
Contact:

Re: jquery div to div (image movement) ,update db.

Mesajde quadmachine » Mar Noi 20, 2012 9:43 pm

Pe partea de PHP nu prea as vrea,ma intereseaza mai mult cu jquery. Functia .stop(event,ui) si revert ,cum as putea sa fac cu astea in functia drop?

Cod: Selectaţi tot

Nu confundati femeia de serviciu cu profesoara de Limba si Literatura Romana.

Avatar utilizator
virus
Average Member
Mesaje: 153
Membru din: Dum Feb 27, 2011 3:16 pm
Localitate: Timisoara
Contact:

Re: jquery div to div (image movement) ,update db.

Mesajde virus » Mar Noi 20, 2012 10:43 pm

Cam asa ceva ?

Cod: Selectaţi tot

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<script src="jquery.js"></script>
<script src="cookie.js"></script>
<script type="text/javascript">
function allowDrop(ev){
ev.preventDefault();
}

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

function drop(ev,id){
   var message = '';
   ev.preventDefault();
   var data=ev.dataTransfer.getData("Text");
   ev.target.appendChild(document.getElementById(data));
              /*    $.ajax({
                  type: 'POST',
                  url: 'box.php?method=handler&u_interfaceid='+id,
                  data: data,
                  dataType: 'html',
                  success: function (response) {
                  if(response.status === "success") {
                         message+response.status;
                   } else if(response.status === 'WHOAAA error') {
                         message+response.status;
                                             }
                   }
                  });
                  */
    //alert("Hurayyy");
   $.cookie('drop', 'Quadmachine', { expires: 1, path: '/' });
   
   }
$(document).ready(function() {
   if ($.cookie('drop')){
      var image=document.getElementById("drag1");
      document.getElementById("div1").appendChild(image);
   } 
 });


</script>

<style>
        #div1 {
         width: 140px;
         height: 140px;
         border: 1px solid #efefef;
         background: url('http://us.cdn2.123rf.com/168nwm/roystudio/roystudio1209/roystudio120900102/15355000-white-canvas-fabric-texture-background-with-seamless-grid-pattern-may-use-for-scrapbooking.jpg');
         padding: 10px;
        }
       
        #drag1 {
         border: 1px solid #efefef;
         padding: 10px;
        }

</style>
</head>

</head>
<body>

<div id="div1" ondrop="drop(event,21)" ondragover="allowDrop(event)">
</div>
<img id="drag1" src="HTML_Logo.png" draggable="true" ondragstart="drag(event)">
<br>

</body>
</html>


Vezi ca am schimbat ceva linkuri (jQuery , Poza HTML5) ; ti le pui tu inapoi
Continutul pentru cookie.js il gasesti aici : https://github.com/carhartl/jquery-cook ... .cookie.js

Am testat doar in Mozilla.
echo ($busy === TRUE) ? "F**k Off" : "Hello. Can I help You?" ;

Avatar utilizator
quadmachine
Senior Member
Mesaje: 798
Membru din: Sâm Iul 10, 2010 4:58 pm
Localitate: Ploiesti
Contact:

Re: jquery div to div (image movement) ,update db.

Mesajde quadmachine » Sâm Noi 24, 2012 5:28 pm

Multumesc foarte mult virus.

Cod: Selectaţi tot

   if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}


Deci este setat pe zile direct, nu intelegeam de ce ai pus la expires: 1( adica 1 zi).Inca odata multumesc.

LE: Daca sterg cookie-ul creat revine elementul la loc, ar merge acest evercookie: http://samy.pl/evercookie/

Cod: Selectaţi tot

Nu confundati femeia de serviciu cu profesoara de Limba si Literatura Romana.

Avatar utilizator
virus
Average Member
Mesaje: 153
Membru din: Dum Feb 27, 2011 3:16 pm
Localitate: Timisoara
Contact:

Re: jquery div to div (image movement) ,update db.

Mesajde virus » Sâm Noi 24, 2012 10:46 pm

Am pus 1 zi pentru ca asa ai zis tu , ca vrei sa ramana 24 de ore cookie-ul :)

LE: Daca sterg cookie-ul creat revine elementul la loc

Asa e si normal. De asta nu prea ma bazez pe cookie-uri foarte mult.

*) Daca userul blocheaza cookie din browser poate sa faca drop la nesfarsit

Ar merge acest evercookie: http://samy.pl/evercookie/

Nu am folosit niciodata. Incearca sa vezi.
Vezi si *) cu acest evercookie

Bafta!
echo ($busy === TRUE) ? "F**k Off" : "Hello. Can I help You?" ;


Înapoi la “Librarii Javascript”

Cine este conectat

Utilizatori ce ce navighează pe acest forum: Niciun utilizator înregistrat și 4 vizitatori