jquery-gridly, drag drop en rename...

Door Michel Koonen op 23-07-2018 23:30 gewijzigd op 23-07-2018 23:58

2.634 views

Ik gebruik de jquery-gridly plugin om picturesets to ordenen.
Iedere pictureset bestaat uit 9 graphics welke ik op de juiste volgorde wil zetten.
op moment dat de graphics op de juiste positie zijn gedragged/dropped, Wil ik de positie van de graphic kunnen uitlezen en via een php script, de file laten renamen naar de juiste positie.
Dus met andere woorden, als 1.jpg op de positie van graphic9 (9.jpg) komt te staan betekent, dit dat alle graphics renamed moeten worden. Ik kan die rename starten op moment van klikken op de button 'rename' of op moment dat de graphic wordt gedropped op z'n nieuwe locatie.. maar hoe pak ik dit in aan met jquery, waar ik nog nooit mee geprogrammeerd heb (buiten het herbruiken van wat scripts).
Mijn vraag is dus concreet. hoe pak ik dit aan?

Hier staat info van de plugin: https://github.com/ksylvest/jquery-gridly

Dit is de html code:


<!DOCTYPE html>
<html>
<head>
	<link href="include/gridly_renameandorder.css" rel="stylesheet" type="text/css">
	<link href="include/jquery.gridly.css" rel="stylesheet" type="text/css" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>
	<script src="include/jquery.gridly.js" type="text/javascript"></script>
</head>
<body>
<?php $thisdir = 'Pictureset1'; //target the directory where the pictures reside. ?>
<div class="gridly">
	<div class="picture"><img src="<?php echo $thisdir.'/1.jpg'; ?>" ></div>
	<div class="picture"><img src="<?php echo $thisdir.'/2.jpg'; ?>" ></div>
	<div class="picture"><img src="<?php echo $thisdir.'/3.jpg'; ?>" ></div>
	<div class="picture"><img src="<?php echo $thisdir.'/4.jpg'; ?>" ></div>
	<div class="picture"><img src="<?php echo $thisdir.'/5.jpg'; ?>" ></div>
	<div class="picture"><img src="<?php echo $thisdir.'/6.jpg'; ?>" ></div>
	<div class="picture"><img src="<?php echo $thisdir.'/7.jpg'; ?>" ></div>
	<div class="picture"><img src="<?php echo $thisdir.'/8.jpg'; ?>" ></div>
	<div class="picture"><img src="<?php echo $thisdir.'/9.jpg'; ?>" ></div>
</div>

<!-- with the rename button I want to compare the initial ordering with the reordered and use a PHP rename scipt to rename the images. -->
 <button type="button">Rename</button> 

<script>
	var reordering = function($elements) {
		// Called before the drag and drop starts with the elements in their starting position.	
		$elements.each(function() {
		console.debug($(this).data('position'));
	  });
	};
	
	var reordered = function($elements) {
		// Called after the drag and drop ends with the elements in their ending position.
		$elements.each(function() {
		console.debug($(this).data('position'));
	  });
	};

	$('.gridly').gridly({
	base: 60, // px   base: The number of pixels for a single column span.
	gutter: 20, // px - gutter: The number of pixels between columns.
	columns: 12 // columns: The total number of columns allowed across.
	
	});
  
</script>			  	
</body>
</html>

Thomas van den Heuvel

23-07-2018 23:46

Je zult op een of andere manier informatie terug moeten sturen naar de server (vanuit javascript informatie doorsturen aan PHP). Dit doe je meestal met een AJAX-call.

Misschien doe je er trouwens ook verstandig aan om in plaats van de bestanden fysiek te hernoemen op een of andere manier de volgorde op te slaan (bijvoorbeeld in een database?). Dat lijkt mij ook een stuk minder foutgevoelig/zwaar dan elke keer te gaan slepen met bestand(snam)en.

M Michel Koonen

24-07-2018 14:39

Goede tip om de bestanden niet fysiek te hernoemen maar dat vast te leggen in de database.

Hoe zorg ik ervoor dat ik de (reordered) info terug krijg vanuit javascript (via Ajax) naar PHP? Heb hier geen kennis/ervaring mee.

Ik heb uit info van de plugin wel begrepen dat ik de volgende code moet opnemen in het script om de reordered info terug te krijgen.

 
var reordered = function($elements) {
        // Called after the drag and drop ends with the elements in their ending position.
        $elements.each(function() {
        console.debug($(this).data('position'));
      });
    };

Thomas van den Heuvel

24-07-2018 19:39

Wat je in wezen doet is een HTTP GET (of POST) request creëren via jQuery.get(), jQuery.post() of gewoon jQuery.ajax() (met een indicatie van de 'method' (POST, GET of PUT)). Hiermee roep je een script aan waar je de data aan overdraagt.

In het bovenstaande fragment zul je nog wel even alle elementen en elementposities bij elkaar moeten sprokkelen, want alle elementen worden daar in afzondering behandeld, en je wilt alle informatie idealiter in 1x doorsturen.

Als je vervolgens die data in een variabele hebt - zeg elementData (object of associatief array oid) - dan kun je als volgt een AJAX-call doen:

$.ajax({
    'url': 'doelscript.php', // het script waar de data naartoe gaat
    'data': elementData, // de data die je verstuurt
    'method': 'POST', // maakt er een POST request van
    'dataType': 'json', // indien van toepassing voor het geval je een respons terugkrijgt, deze parameter geeft aan van welk type dat is
    'success': function(data) {
        // voor het geval het PHP-script nog iets moet terugkoppelen na het opslaan van de volgorde
        if (data.success) {
            alert('whee!');
        } else {
            alert('boo!');
        }
    }
});

En doelscript.php ziet er bijvoorbeeld als volgt uit:

<?php
$success = false;

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // doe je ding hier met $_POST
    // bepaal of alles geslaagd is
    // ...
    $success = true;
}

// stuur JSON response die weer opgevangen wordt in het "success" deel
header('Content-Type: application/json; charset=UTF-8');
echo json_encode(array(
    'success' => $success,
));
?>

Van dit soort codesnippets zijn trouwens legio voorbeelden te vinden op het internet.

M Michel Koonen

24-07-2018 20:29

ok.. daar zal ik eens induiken thanks

Thomas van den Heuvel

24-07-2018 22:06 gewijzigd op 24-07-2018 22:07

Enige kanttekeningen:
- als die opslag-operatie in PHP normaal een afgeschermde operatie is zul je in die doelscript.php dus ook controles moeten uitvoeren (bijvoorbeeld het starten van een sessie en het controleren van gebruikersrechten ofzo)

- de success() functie zou je bijvoorbeeld kunnen gebruiken om knoppen opnieuw te activeren, bijvoorbeeld als je op een "opslaan" knop drukt deactiveer je de knop, start je de ajax-call en als deze klaar is activeer je deze weer, abstract:

$('#formulier').submit(function(e) {
    // voorkom het default gedrag van het submitten van de form
    e.preventDefault();
    // deactiveer submit knop of doe iets anders grafisch
    $('#submitbutton').attr('disabled', 'disabled);
    // doe de ajax call zoals voorheen
    $.ajax({
        // ...
        'success': function(data) {
            // doe dingen
            // ...
            // zet submitknop weer aan
            $('#submitbutton').removeAttr('disabled');
        }
    });
    // [NOOT 3] zie volgende kanttekening voor dit stukje code (na de ajax-call)
}
});

- gotcha bij [NOOT 3] als je code zet na je AJAX-call dan wordt deze meteen uitgevoerd nadat de AJAX-call is aangeroepen, de code "loopt dus gewoon verder" en zal niet wachten op de respons die in "success" mogelijk verder wordt verwerkt, deze call is dus asynchroon, zie het als een apart draadje dat parallel gaat lopen aan de reeds bestaande codeflow; dit heeft mogelijk consequenties voor het design van andere code waarbij acties mogelijk moeten wachten op (de uitkomst van) dit soort evenementen

Reageren

Inloggen om te reageren