dslak
/
coze_demo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add drag-n-drop

develop
Carmine De Rosa 8 years ago
parent
dc8af9284d
commit
9ee3fdcd80
7 changed files with 156 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 55
      css/styles.css
  2. 8
      js/scripts.js
  3. 65
      modules.php
  4. BIN
      scss/.sass-cache/132087705a52dd1d0e0e4a761ce2b1b521d0d802/global.scssc
  5. BIN
      scss/.sass-cache/5f9cd8e8aad7f3f5cd444b9e1c83afcdd207f75c/modules.scssc
  6. 2
      scss/global.scss
  7. 44
      scss/sections/modules.scss

55
css/styles.css
View File

@ -14556,7 +14556,7 @@ a:hover {
#MainContent {
top: 0;
z-index: 0;
overflow: hidden;
overflow-x: hidden;
}
/* line 89, global.scss */
@ -14741,17 +14741,26 @@ header .container .row .menu ul li.active a:hover, header .container .row .menu
line-height: 36px;
padding: 0 10px;
background: white;
border: 2px solid #ddd;
border: 2px solid #f2f2f2;
border-radius: 5px;
position: relative;
transition: .4s;
}
/* line 51, sections/modules.scss */
.modules .content .dropdown.droppable.drop-active {
border: 2px solid #bf0f3d;
}
/* line 55, sections/modules.scss */
.modules .content .dropdown.drop-inactive {
opacity: .4;
}
/* line 49, sections/modules.scss */
/* line 59, sections/modules.scss */
.modules .content .dropdown .label {
font-size: 0.75rem;
font-weight: bold;
color: black;
}
/* line 55, sections/modules.scss */
/* line 65, sections/modules.scss */
.modules .content .dropdown .data {
position: absolute;
font-size: 0.625rem;
@ -14760,17 +14769,49 @@ header .container .row .menu ul li.active a:hover, header .container .row .menu
right: 10px;
top: 0;
}
/* line 64, sections/modules.scss */
/* line 74, sections/modules.scss */
.modules .content .dropdown:after {
content: '\f107';
font-family: "FontAwesome";
position: absolute;
font-weight: bold;
color: #ddd;
color: #2f2f2f;
top: 0;
right: -25px;
}
/* line 78, sections/modules.scss */
/* line 84, sections/modules.scss */
.modules .content .dropdown.active {
border: 2px solid #ddd;
}
/* line 86, sections/modules.scss */
.modules .content .dropdown.active:after {
color: #ddd;
}
/* line 95, sections/modules.scss */
.modules .content .dropdown-links .link {
width: 100%;
height: 20px;
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
}
/* line 100, sections/modules.scss */
.modules .content .dropdown-links .link:first-child {
border-left: 1px solid #ddd;
}
/* line 104, sections/modules.scss */
.modules .content .dropdown-links .link.source {
border: 0;
position: relative;
}
/* line 107, sections/modules.scss */
.modules .content .dropdown-links .link.source:before {
content: '';
position: absolute;
right: 50%;
height: 100%;
border-left: 1px solid #ddd;
}
/* line 118, sections/modules.scss */
.modules .content .div-drop {
width: 100px;
padding: 10px;

8
js/scripts.js
View File

@ -4,6 +4,8 @@ function allowDrop(ev) {
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
$('.dropdown').addClass('drop-inactive');
$('.droppable').removeClass('drop-inactive').addClass('drop-active');
}
function drop(ev) {
@ -17,3 +19,9 @@ function drop(ev) {
// ev.target.appendChild(module.get(0));
console.log(module.text());
}
function dragLeave(ev) {
$('.dropdown').removeClass('drop-inactive');
$('.droppable').removeClass('drop-active');
}

65
modules.php
View File

@ -5,17 +5,17 @@
<div class="px-2">
<div class="div-drag-container">
<div class="div-drag" draggable="true" ondragstart="drag(event)" id="module_DC">Differenze culturali</div>
<div class="div-drag" draggable="true" ondragstart="drag(event)" ondragend="dragLeave(event)" id="module_DC">Differenze culturali</div>
</div>
<p class="font-10 font-bold text-grey px-2">Sfruttare le differenze culturali per ottimizzare il processo di vendita</p>
<div class="div-drag-container">
<div class="div-drag" draggable="true" ondragstart="drag(event)" id="module_A">Accoglienza</div>
<div class="div-drag" draggable="true" ondragstart="drag(event)" ondragend="dragLeave(event)" id="module_A">Accoglienza</div>
</div>
<p class="font-10 font-bold text-grey px-2">Mettere il cliente nella condizione ideale per compiere un acquisto</p>
<div class="div-drag-container">
<div class="div-drag" draggable="true" ondragstart="drag(event)" id="module_GC">Gestione della cassa</div>
<div class="div-drag" draggable="true" ondragstart="drag(event)" ondragend="dragLeave(event)" id="module_GC">Gestione della cassa</div>
</div>
<p class="font-10 font-bold text-grey px-2">Ottimizzare il tempo di attesa per il pagamento delle merci</p>
</div>
@ -25,15 +25,64 @@
<div class="col-9 content">
<p class="font-14 font-bold text-upper text-red">Company overview</p>
<div class="row my-5">
<div class="col-4 mx-auto">
<div class="dropdown">
<div class="row my-2">
<div class="col-3 p-0 mx-auto">
<div class="dropdown active">
<div class="label">Italia</div>
<div class="data"><i class="fa fa-flag"></i> 20 <i class="fa fa-user"></i> 100</div>
</div>
</div>
</div>
<div class="row dropdown-links">
<div class="col-4 p-0 mx-auto link source"></div>
</div>
<div class="row dropdown-links">
<div class="col-4 p-0 ml-auto mr-0 link"></div>
<div class="col-4 p-0 mr-auto ml-0 link"></div>
</div>
<div class="row my-2">
<div class="col-3 p-0 mx-auto">
<div class="dropdown">
<div class="label">Bari</div>
<div class="data"><i class="fa fa-flag"></i> 8 <i class="fa fa-user"></i> 40</div>
</div>
</div>
<div class="col-3 p-0 mx-auto">
<div class="dropdown active">
<div class="label">Milano</div>
<div class="data"><i class="fa fa-flag"></i> 2 <i class="fa fa-user"></i> 20</div>
</div>
</div>
<div class="col-3 p-0 mx-auto">
<div class="dropdown">
<div class="label">Roma</div>
<div class="data"><i class="fa fa-flag"></i> 8 <i class="fa fa-user"></i> 40</div>
</div>
</div>
</div>
<div class="row dropdown-links">
<div class="col-4 p-0 mx-auto link source"></div>
</div>
<div class="row dropdown-links">
<div class="col-6 p-0 mx-auto link"></div>
</div>
<div class="row my-2">
<div class="col-3 p-0 mx-auto">
<div class="dropdown droppable active" ondrop="drop(event)" ondragover="allowDrop(event)">
<div class="label"><i class="fa fa-flag"></i> Duomo</div>
<div class="data"><i class="fa fa-user"></i> 2</div>
</div>
</div>
<div class="col-3 p-0 mx-auto">
<div class="dropdown droppable" ondrop="drop(event)" ondragover="allowDrop(event)">
<div class="label"><i class="fa fa-flag"></i> Sempione</div>
<div class="data"><i class="fa fa-user"></i> 2</div>
</div>
</div>
</div>

BIN
scss/.sass-cache/132087705a52dd1d0e0e4a761ce2b1b521d0d802/global.scssc
View File

Binary file not shown.

BIN
scss/.sass-cache/5f9cd8e8aad7f3f5cd444b9e1c83afcdd207f75c/modules.scssc
View File

Binary file not shown.

2
scss/global.scss
View File

@ -83,7 +83,7 @@ a{
#MainContent{
top: 0;
z-index: 0;
overflow: hidden;
overflow-x: hidden;
}
#map{

44
scss/sections/modules.scss
View File

@ -42,9 +42,19 @@
line-height: 36px;
padding: 0 10px;
background: white;
border: 2px solid $grey;
border: 2px solid $light-grey;
border-radius: 5px;
position: relative;
transition: .4s;
&.droppable{
&.drop-active{
border: 2px solid $red;
}
}
&.drop-inactive{
opacity: .4;
}
.label{
font-size: $font-12;
@ -66,14 +76,44 @@
font-family: $icon;
position: absolute;
font-weight: bold;
color: $grey;
color: $dark-grey;
top: 0;
right: -25px;
}
&.active{
border: 2px solid $grey;
&:after{
color: $grey;
}
}
}
.dropdown-links{
.link{
width: 100%;
height: 20px;
border-top: 1px solid $grey;
border-right: 1px solid $grey;
&:first-child{
border-left: 1px solid $grey;
}
&.source{
border: 0;
position: relative;
&:before{
content: '';
position: absolute;
right: 50%;
height: 100%;
border-left: 1px solid $grey;
}
}
}
}
.div-drop{
width: 100px;

Write Preview
Loading…
Cancel
Save