HTML5 drag & drop & how to detect cursor position in js #34
Comments
How to import jquery using ES6 syntax?https://stackoverflow.com/questions/34338411/how-to-import-jquery-using-es6-syntax import $ from "jquery";
// export for others scripts to use
window.$ = $;import jQuery from "jquery";
// export for others scripts to use
window.jQuery = jQuery; |
Face Detection APIconsole.error("Your browser isn't supported `Face Detection API`!"); |
|
timestampconst getTimestamp = (debug = false) => {
let timestamp = `timestamp-`;
timestamp += new Date().getTime();
if (debug) {
console.log(`时间戳: ${timestamp}`);
}
try {
if (timestamp !== "timestamp-") {
return timestamp;
}
} catch (err) {
console.error(`时间戳 err: ${err}`);
return `timestamp-${Math.random() * 1024 ** 5}`;
}
}; |
js & delete
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete function
delete & Object
function test() {
let x = `123`,
obj = {
x
};
console.log(`obj: `, obj);
delete obj.x;
console.log(`obj: `, obj);
}delete & var/let/const
function test() {
let x = `123`;
console.log(`x: `, x);
let result = delete x;
console.log(`x: `, x);
console.log(`result: `, result);
};Object & delete
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete https://stackoverflow.com/questions/742623/deleting-objects-in-javascript |
H5 DnD & position detection |
|
|
"use strict";
/**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
*
* @description getModulePositionGenerator
* @augments
* @example
*
*/
const getModulePositionGenerator = (datas = [], debug = false) => {
let result = {
getTimestamp: (debug = false) => {
let timestamp = `timestamp-`;
timestamp += new Date().getTime();
if (debug) {
console.log(`时间戳: ${timestamp}`);
}
try {
if (timestamp !== "timestamp-") {
return timestamp;
}
} catch (err) {
console.error(`时间戳 err: ${err}`);
return `timestamp-${Math.random() * 1024 ** 5}`;
}
},
destoryPosition: (debug = false) => {
let result = delete window.ModulePosition;
if (debug) {
console.log(`时间戳: ${timestamp}`);
}
},
getInsertPosition: (selector = `[class="h5-dnd-container"]`, debug = false) => {
let boxes = [...document.querySelectorAll(selector)];
boxes.forEach(
(box, i) => {
if (box && !box.dataset.positionFlag) {
box.dataset.positionFlag = true;
box.addEventListener("dragover", function(e) {
e.preventDefault();
let position = ``,
uid = ``,
size = box.getBoundingClientRect();
let boxY = size.top,
dragY = e.pageY;
uid = getTimestamp();
position = (dragY - boxY > (size.height / 2)) ? `after` : `before`;
if (uid && position) {
window.ModulePosition = {
uid,
position,
};
}
}, false);
box.addEventListener("drop", function(e) {
e.preventDefault();
e.stopPropagation();
// test
if (debug) {
console.log(`window.ModulePosition = \n`, JSON.stringify(window.ModulePosition, null, 4));
}
}, false);
}
}
);
},
};
return result;
};
export default getModulePositionGenerator;
export {
getModulePositionGenerator,
};
|
web worker |
drag and drophttps://www.webydo.com/blog/web-design/resources/11-amazing-html5-drag-and-drop-examples/ /*
<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'You can drag this text')">
You can<strong></strong>this text.
</div>
function onDrop(event) {
var data = event.dataTransfer.getData("text/plain");
// event.target.textContent
event.target.textContent = data;
event.preventDefault();
}
*/drag feedback imagehttps://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#Drag_Effects
event.dataTransfer.setDragImage(image, xOffset, yOffset);
function dragWithCustomImage(event) {
var canvas = document.createElementNS("http://www.w3.org/1999/xhtml","canvas");
canvas.width = canvas.height = 50;
var ctx = canvas.getContext("2d");
ctx.lineWidth = 4;
ctx.moveTo(0, 0);
ctx.lineTo(50, 50);
ctx.moveTo(0, 50);
ctx.lineTo(50, 0);
ctx.stroke();
var dt = event.dataTransfer;
dt.setData('text/plain', 'Data to Drag');
dt.setDragImage(canvas, 25, 25);
}
|
CORBhttps://jakearchibald.com/2018/i-discovered-a-browser-bug/
|
xgqfrms
added
HTML5 drag & drop
HTML5 drag & drop
https://javascript.info/mouse-drag-and-drop
The text was updated successfully, but these errors were encountered: