uk-dnd
Version:
It is a uikit drag and drop component for vue.
52 lines (51 loc) • 2.68 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>uk-dnd</title>
</head>
<body>
<div class="uk-container uk-margin-top uk-margin-bottom" uk-height-viewport="expand: true">
<div class="uk-height-1-1" uk-grid>
<div id="app" class="uk-width-1-4 uk-padding-remove uk-background-muted">
<div class="uk-position-relative uk-align-center uk-margin-top"
style="width: 80%; height: 55px;">
<uk-dnd width="100%" height="100%" target=".uk-tile" @drop-to-target="dragend">
<div class="uk-card uk-card-body uk-card-default uk-padding-small">
It is a default card.
</div>
</uk-dnd>
</div>
<div class="uk-position-relative uk-align-center" style="width: 80%; height: 55px;">
<uk-dnd width="100%" height="100%" target=".uk-tile" @drop-to-target="dragend">
<div class="uk-card uk-card-body uk-card-primary uk-padding-small">
It is a primary card.
</div>
</uk-dnd>
</div>
<div class="uk-position-relative uk-align-center" style="width: 80%; height: 55px;">
<uk-dnd width="100%" height="100%" target=".uk-tile" @drop-to-target="dragend">
<div class="uk-card uk-card-body uk-card-secondary uk-padding-small">
It is a secondary card.
</div>
</uk-dnd>
</div>
<div class="uk-position-relative uk-align-center" style="width: 80%; height: 20px;">
<uk-dnd target=".uk-tile" @drop-to-target="dragend">
<span>It is draggable text.</span>
</uk-dnd>
</div>
<div class="uk-position-relative uk-align-center" style="width: 80%; height: 100px;">
<uk-dnd width="100" height="100" target=".uk-tile" @drop-to-target="dragend">
<img src="/test/vue-logo.png">
</uk-dnd>
</div>
</div>
<div class="uk-width-3-4">
<div class="uk-tile uk-tile-muted uk-padding-remove uk-height-1-1"></div>
</div>
</div>
</div>
<script src="/bundle.js"></script>
</body>
</html>