jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
125 lines (113 loc) • 4.09 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title id='Description'>
ReactJS DragDrop demo. Drag a T-Shirt from the left area and drop it into the 'Shopping Cart' table.
</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdragdrop.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<style type="text/css">
.draggable-demo-cart {
border: 2px dashed #aaa;
padding: 5px;
width: 232px;
margin: auto;
}
.draggable-demo-shop {
border: 1px solid #666;
width: 665px;
padding: 5px;
}
.draggable-demo-catalog {
position: relative;
width: 397px;
border: 1px solid #bbb;
height: 457px;
float: left;
}
.draggable-demo-product-image {
width: 150px;
}
.draggable-demo-product {
padding: 5px;
border: 1px solid #888;
width: 115px;
height: 135px;
background-color: #fff;
position: absolute;
margin: 5px;
}
.draggable-demo-product img {
width: 113px;
border: 1px solid #aaa;
border-top-width: 0px;
outline-width: 15px;
}
.draggable-demo-product-header {
border: 1px solid #888;
height: 20px;
border-bottom-width: 0px;
font-size: 13px;
position: relative;
text-align: center;
}
.draggable-demo-product-header-label {
margin-top: 3px;
}
.draggable-demo-product-price {
position: absolute;
top: 124px;
left: 6px;
width: 113px;
text-align: center;
font-family: Verdana;
font-size: 11px;
display: none;
height: 16px;
border-top: 1px solid #888;
border-bottom: 1px solid #fff;
}
.draggable-demo-title {
font-size: 23px;
font-family: Verdana;
text-align: center;
padding: 7px;
margin: 5px;
font-weight: bold;
border: 1px solid #aaa;
}
.draggable-demo-cart-wrapper {
float: right;
border: 1px solid #aaa;
height: 457px;
width: 260px;
}
.draggable-demo-total {
font-size: 17px;
font-family: Verdana;
margin: 6px;
margin-top: 7px;
padding: 7px;
}
</style>
</head>
<body>
<div class="example-description" style="margin-bottom:3em">
ReactJS DragDrop demo. Drag a T-Shirt from the left area and drop it into the 'Shopping Cart' table.
</div>
<div id="app"></div>
<script src="../build/dragdrop_defaultfunctionality.bundle.js"></script>
</body>
</html>