HTML5 Drag and Drop

This post describes how to implement drag-and-drop on a web page.  In my case I was developing a page that had various kinds of dynamic JavaScript objects that I needed to drag around between container DIVs on the page.  The basics of HTML5 drag-and-drop are pretty simple, but it took me a bit to settle on a mechanism for passing my JavaScript objects as a payload for the drag/drop operations.  Actually, I didn’t pass the objects themselves but rather unique identifiers that could be used to look up the objects when they were dropped.

Passing Data

The ondragstart and ondrop handlers are both called with a DragEvent.  Each of these contains a dataTransfer property, which can be used to pass information between ondragstart and ondrop using its setData and getData functions.  Unfortunately, these data values are strings, so you cannot pass objects directly.

My approach was to use data-xxx attributes on the element being dragged, which can be found in the event’s target property.  In the ondragstart function, I copy these into the dataTransfer property of the DragEvent object.

<div data-foo="xxx" draggable="true" ondragstart="drag_start(event)">
... 
</div>

function drag_start(ev) {
    ev.dataTransfer.setData("foo", ev.target.dataset.foo);
}

Then in the ondrop function I access can access them.

function drop(ev) {
    let foo_value = ev.dataTransfer.getData("foo"); // "xxx"
}

 

 

Installing WordPress on a Mac

Installing WordPress on a Mac without using MAMP was a difficult process. I haven’t installed MAMP on a Mac in a long time, but I preferred to use the built-in components instead installing and managing a separate set of applications. What follows is a description of how I got it to work.

My system:

  • Mac OS: High Sierra
  • MySQL version: 8.0.11
  • PHP version: 10.1.14

I started with a clean install of High Sierra and used the default Apache and PHP that come with the OS.  I followed the WordPress install instructions to download and set it up, creating a new MySQL user account for the WordPress database.  No problems.

When I ran the install.php script, it failed to connect to the database without giving me any additional information why.  The first thing I checked was the MySQL login and confirmed that I could connect to MySQL with that login and access the WordPress database.  My next step was to create a test PHP page to debug accessing mysql from PHP.  I initially used mysql_connect for this but  discovered that that is no longer supported.  I switched to mysqli_connect and edited wp-db.php to force it to use mysqli.  That failed too because I was using ‘localhost’ for the host name, which caused PHP to hang for a while and then fail because “MySQL server has gone away”.  I figured ‘localhost’ wasn’t being resolved correctly and changed to ‘127.0.0.1’.

Next the script failed with the following error:  “The server requested authentication method unknown to the client [caching_sha2_password]”.  This is a great example of an ambiguous, misleading error message.  It seemed to be saying that I requested an authentication method named “unknown”, but what it really meant is “The server requested an authentication method that is unknown to the client and that method name is caching_sha2_password.”  I am amazed that developers are still trying to save a few bytes here and there by using ungrammatical or cryptic error messages instead of opting for clarity.

After googling this error for a while I discovered that MySQL has recently changed their user authentication scheme to a new one that breaks legacy code like PHP.  There are a number of solutions to be found in StackOverflow (my favorite site on the internet), but the solution that worked for me was as follows.

  1. Create a mysql.cnf file with two lines.
    [mysqld]
    default_authentication_plugin = mysql_native_password
  2. Change the WordPress MySQL account to use mysql_native_password
    ALTER USER ‘xxx’@’localhost’ IDENTIFIED WITH mysql_native_password BY ‘whatever’;
  3. Use the Mac’s MySQL Preferences pane to tell MySQL to use this configuration file and restart MySQL.

Bingo – my install.php script ran correctly.

My lessons learned:

  • WordPress looks nice but it uses PHP, which is a POS.
  • Installing MySQL on a Mac is a big pain.  Attempting to install MariaDB is a bigger pain.
  • Don’t trust MySQL not to break your applications unexpectedly.

Here’s my PHP test page.

<?php

$host = '127.0.0.1';
$user = 'foobar';
$pswd = 'foobar';
$db = 'wordpress';

echo "\n\nConnecting to $db@$host with '$user'/'$pswd'\n";
$link = mysqli_connect($host, $user, $pswd, $db);

if (!$link) {
    die("\n*** Could not connect: " . mysqli_connect_error() . "\n");
}

echo "\n**** Connected successfully\n";
mysqli_close($link);
?>