{"id":60383,"date":"2023-08-10T03:01:45","date_gmt":"2023-08-09T17:01:45","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=60383"},"modified":"2023-08-09T11:44:35","modified_gmt":"2023-08-09T01:44:35","slug":"drag-and-drop-three-dimensional-look-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/drag-and-drop-three-dimensional-look-tutorial\/","title":{"rendered":"Drag and Drop Three Dimensional Look Tutorial"},"content":{"rendered":"
\"Drag<\/a>

Drag and Drop Three Dimensional Look Tutorial<\/p><\/div>\n

So far with our latest Drag and Drop work, further to that of Drag and Drop via Hotlinked External Javascript Tutorial<\/a> below, we’ve concentrated on Javascript. So, you’d think it would be CSS’s time for attention?! Well, sort of. We like to do a lot of CSS styling via Javascript DOM like (today’s simple intervention<\/font> to add a Three Dimensional look to our drag via CSS property text-shadow<\/a>) …<\/p>\n


\n window.addEventListener(\"DOMContentLoaded\", () => {
\n gelo=wod('body');
\nconst source = document.querySelector(\"#mg\");
\nif (source.title.indexOf('ong drag') == -1 && !classo) {
\n source.title+=' ... long drag (eg. more than 10 seconds) also opens a Google Maps webpage ... very long drag (eg. more than 20 seconds) also opens a Google Earth webpage';
\n}
\n
\nif (source) {
\n if (source.outerHTML.indexOf('text-shadow:') == -1) {
\n source.style.textShadow='-1px 1px 3px #952dff';
\n }
\n}
\n<\/font>
\nif (noyes == noyes.toUpperCase()) {
\n source.style.border='1px dashed pink';
\n}
\nconsole.log('source.id=' + source.id);
\nsource.addEventListener(\"dragstart\", (ev) => {
\n var elo=null;
\n dragdt=(new Date());
\n\/\/ more code follows
\n});
\nsource.addEventListener(\"dragend\", (ev) =>
\n ev.target.classList.remove(\"dragging\")
\n);
\n<\/code><\/p>\n

That’s it! Guess this is the joy of involving genericized external Javascript, because this simple change to<\/a> our external Javascript countries.js<\/a> “Drag and Drop specialist” has affected (the look of)<\/font> about five web applications, so far, calling it … one per codeline!<\/p>\n

\n

\n

Previous relevant Drag and Drop via Hotlinked External Javascript Tutorial<\/a> is shown below.<\/p>\n

\"Drag<\/a>

Drag and Drop via Hotlinked External Javascript Tutorial<\/p><\/div>\n

There are three very useful “hotwiring”<\/a> ideas that usually work with your web applications …<\/p>\n