jquery div to div (image movement) ,update db.
Moderator: Moderatori
-
- Senior Member
- Mesaje: 807
- Membru din: Sâm Iul 10, 2010 4:58 pm
- Localitate: Ploiesti
- Contact:
jquery div to div (image movement) ,update db.
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
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.
- 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.
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?" ;
Re: jquery div to div (image movement) ,update db.
Se poate face foarte usor cu
http://jqueryui.com/sortable/
ai listenere pe eventuri si ai actiuni ajax :p
http://api.jqueryui.com/sortable/
http://jqueryui.com/sortable/
ai listenere pe eventuri si ai actiuni ajax :p
http://api.jqueryui.com/sortable/
-
- Senior Member
- Mesaje: 807
- Membru din: Sâm Iul 10, 2010 4:58 pm
- Localitate: Ploiesti
- Contact:
Re: jquery div to div (image movement) ,update db.
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.
Re: jquery div to div (image movement) ,update db.
pai ma gandesc ca la listenerul de stop poti pune un settimeout care sa sa faca un revert sau ceva de genul
- 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.
Care varianta ai folosit-o ? Cea data de mine sau http://jqueryui.com/sortable/ ?
Poti sa postezi si codul , ca sa te putem ajuta
Poti sa postezi si codul , ca sa te putem ajuta
echo ($busy === TRUE) ? "F**k Off" : "Hello. Can I help You?" ;
-
- Senior Member
- Mesaje: 807
- Membru din: Sâm Iul 10, 2010 4:58 pm
- Localitate: Ploiesti
- Contact:
Re: jquery div to div (image movement) ,update db.
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.
- 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.
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?" ;
-
- Senior Member
- Mesaje: 807
- Membru din: Sâm Iul 10, 2010 4:58 pm
- Localitate: Ploiesti
- Contact:
Re: jquery div to div (image movement) ,update db.
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.
- 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.
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?" ;
-
- Senior Member
- Mesaje: 807
- Membru din: Sâm Iul 10, 2010 4:58 pm
- Localitate: Ploiesti
- Contact:
Re: jquery div to div (image movement) ,update db.
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.
- 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.
Cam asa ceva ?
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.
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?" ;
-
- Senior Member
- Mesaje: 807
- Membru din: Sâm Iul 10, 2010 4:58 pm
- Localitate: Ploiesti
- Contact:
Re: jquery div to div (image movement) ,update db.
Multumesc foarte mult virus.
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
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.
- 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.
Am pus 1 zi pentru ca asa ai zis tu , ca vrei sa ramana 24 de ore cookie-ul
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
Nu am folosit niciodata. Incearca sa vezi.
Vezi si *) cu acest evercookie
Bafta!
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 3 vizitatori