Skip to content

Instantly share code, notes, and snippets.

@semlinker

semlinker/transmat-source.html

Created July 3, 2021 04:33
Show Gist options
  • Save semlinker/c40baa3d4a0567e555e2e839c84d10dd to your computer and use it in GitHub Desktop.
Save semlinker/c40baa3d4a0567e555e2e839c84d10dd to your computer and use it in GitHub Desktop.
Download ZIP
Transmat 使用示例
Raw
transmat-source.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Transmat Source 示例</title>
<script src="https://unpkg.com/transmat/lib/index.umd.js"></script>
<style>
body {
text-align: center;
font: 1.2em Helvetia, Arial, sans-serif;
}
#source {
background: #eef;
border: solid 1px rgba(0, 0, 255, 0.2);
border-radius: 8px;
cursor: move;
display: inline-block;
margin: 1em;
padding: 4em 5em;
}
</style>
</head>
<body>
<div id="source" draggable="true" tabindex="0">大家好，我是阿宝哥</div>
<script>
const { Transmat, addListeners, TransmatObserver } = transmat;
const source = document.getElementById("source");
addListeners(source, "transmit", (event) => {
const transmat = new Transmat(event);
transmat.setData({
"text/plain": "大家好，我是阿宝哥!",
"text/html": `
<h1>大家好，我是阿宝哥</h1>
<p>
聚焦全栈，专注分享 TS、Vue 3、前端架构等技术干货。
<a href="https://juejin.cn/user/764915822103079">访问我的主页</a>!
</p>
<img src="https://sf3-ttcdn-tos.pstatp.com/img/user-avatar/075d8e781ba84bf64035ac251988fb93~300x300.image" border="1" />`,
"text/uri-list": "https://juejin.cn/user/764915822103079",
"application/json": {
name: "阿宝哥",
wechat: "semlinker",
},
});
});
</script>
</body>
</html>
Raw
transmat-target.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Transmat Target 示例</title>
<script src="https://unpkg.com/transmat/lib/index.umd.js"></script>
<style>
body {
text-align: center;
font: 1.2em Helvetia, Arial, sans-serif;
}
#target {
border: dashed 1px rgba(0, 0, 0, 0.5);
border-radius: 8px;
margin: 1em;
padding: 4em;
}
.drag-active {
background: rgba(255, 255, 0, 0.1);
}
.drag-over {
background: rgba(255, 255, 0, 0.5);
}
</style>
</head>
<body>
<div id="target" tabindex="0">放这里哟！</div>
<script>
const { Transmat, addListeners, TransmatObserver } = transmat;
const target = document.getElementById("target");
addListeners(target, "receive", (event) => {
const transmat = new Transmat(event);
if (
transmat.hasType("application/json") &&
transmat.accept()
) {
const jsonString = transmat.getData("application/json");
const data = JSON.parse(jsonString);
target.textContent = jsonString;
console.dir(data);
}
});
const obs = new TransmatObserver((entries) => {
for (const entry of entries) {
const transmat = new Transmat(entry.event);
if (transmat.hasType("application/json")) {
entry.target.classList.toggle("drag-active", entry.isActive);
entry.target.classList.toggle("drag-over", entry.isTarget);
}
}
});
obs.observe(target);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment