jsdk-offical
Version:
JSDK is the most comprehensive TypeScript framework, like JDK.
77 lines (67 loc) • 2.14 kB
HTML
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Cache-Control" content="no-cache,no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>JSDK Example</title>
<link rel="shortcut icon" href="#" />
<script src="/jsdk/dist/jscore.js"></script>
<script src="/jsdk/dist/jsdk-config.js?_=25"></script>
<style>
[draggable] {
user-select: none;
}
.column {
height: 150px;
width: 150px;
display: inline-block;
border: 2px solid #666666;
background-color: #ccc;
margin-right: 5px;
border-radius: 10px;
box-shadow: inset 0 0 3px #000;
text-align: center;
cursor: move;
}
.column header {
color: #fff;
background: radial-gradient(ellipse at center, #000000 0%, #7c7c7c 100%);
text-shadow: #000 0 1px;
box-shadow: 5px;
padding: 5px;
border-bottom: 1px solid #ddd;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
pointer-events: none;
}
.column.over {
border: 2px dashed #000;
}
</style>
</head>
<body>
<h2>
Drag X with custom image
</h2>
<div id="columns">
<div class="column" draggable="true">
<header>A</header>
</div>
<div class="column" draggable="true">
<header>B</header>
</div>
<div class="column" draggable="true">
<header>C</header>
</div>
<div class="column" draggable="true">
<header>X</header>
</div>
</div>
<script src="../../env.js"></script>
<script src="drag_image.js"></script>
</body>
</html>