Drag and Drop - for ad layout

drag-and-drop.markdown

Drag and Drop

I'm testing Jqury ui.

A Pen by Murat on CodePen.

License.

index.html

<div class="page">
  <div class="header">

  </div>
  <div class="body">
    <div class="container">
      <div class="sidebar">
        <div class="sidebar__title">
          Users
          <div class="dots">•</div>
          <div class="sidebar__toggler">
            <div class="toggler__container">
              <div class="toggler__item">Users</div>
              <div class="toggler__item">Group of Users</div>
            </div>                       
          </div>
        </div>
        <div class="sidebar__items">
          <div class="sidebar__item">Alexey Ivanov</div>
          <div class="sidebar__item">Kirill Strelcov</div>
          <div class="sidebar__item">Anastasia Ivanova</div>
          <div class="sidebar__item">Andrey Voronin</div>
        </div>
      </div>
      <div class="work_area">
        <div class="work_area__title">
          <div class="prev_number"><div class="number__item">+232 586 647 87 98</div></div>
          <div class="current_number">+7 926 877 26 38</div>
          <div class="next_number"><div class="number__item">+1 543 586 44 66</div></div>
        </div>
        <div class="work_area__container">
          <div class="work_area__columns">
            <div class="work_area__columns_title"> Input Calls</div>
            <div class="work_area__items_drop">
              <!--<div class="work_area__item">Atila Murat</div>  
                              <div class="work_area__item"></div>-->  
            </div>
          </div>
          <div class="work_area__columns">
            <div class="work_area__columns_title">Output Calls</div>
            <div class="work_area__items_drop" id="drop__area">
              <div class="drop__here">Drop Here</div>
              <!--<div class="work_area__item">Atila Murat</div>  
                              <div class="work_area__item"></div>-->  
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

script.js

//$(function() {
// try #1
//  if ($('#drop__area').has(('.sidebar__item'))) {
//    $('.drop__here').remove();
//  }
// try #2
//if ( $('.sidebar__item').parents('#drop__area').length == 1) {
//  $('.drop__here').remove();
//}else{}
// 
//});


$('.work_area__items_drop').sortable();
$('.sidebar__item').draggable({
	  connectToSortable: '.work_area__items_drop',
	  helper: 'clone',
	});

$('.work_area__items_drop').droppable({
  
  drop: function(e, ui) {
    if( $( ui.draggable ).parent().hasClass( 'sidebar__items' ) )  {
     $(ui.draggable).remove();
     // $('.drop__here').remove();
    }
  }
});

$('.dots').click(function(event) {
  $('.sidebar__toggler').toggleClass('visible');
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

style.less

// out: ../css/app.css, compress: true, strictMath: true
* {
  margin: 0;
  padding: 0;
}

body {
  background: #F3F3F3;
  font-family: sans-serif;
}

.container {
  width: 800px;
  margin: 0 auto;
  background: #F3F3F3;
  /*background: #F0F0F0;*/
  padding: 20px 0 0 0;
  font-size: 0;
}

.sidebar {
  display: inline-block;
  vertical-align: top;
  width: 200px;
  position: relative;
  background: #fff;
  box-shadow: 0px 0px 1px 1px rgba(204, 204, 204, 0.6);
  font-size: 16px;
}

.sidebar__title {
  width: 200px;
  display: block;
  border-bottom: 1px solid #cccccc;
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
  position: relative;
}

.dots {
  position: absolute;
  height: 20px;
  width: 40px;
  /*background: #8C8C8C;*/
  top: 50%;
  right: 5px;
  margin: -10px 0;
  cursor: pointer;
  font-size: 20px;
  color: #8c8c8c;
  user-select: none;
  -webkit-user-select: none;
  &:before {
    content: '';
    position: absolute;
    height: 5px;
    width: 5px;
    background: #8C8C8C;
    top: 50%;
    left: 10px;
    margin: -2.5px 0 0 0;
    border-radius: 50%;
  }
  &:after {
    content: '';
    position: absolute;
    height: 5px;
    width: 5px;
    background: #8C8C8C;
    top: 50%;
    right: 10px;
    margin: -2.5px 0 0 0;
    border-radius: 50%;
  }
}

.sidebar__items {
  min-height: 80px;
  text-align: center;
}

.sidebar__item {
  width: 80%;
  margin: 0 auto;
  background: #fff;
  height: auto;
  padding: 10px 10px;
  box-sizing: border-box;
   border-bottom: 1px dashed #cccccc;
  &:last-child{
    border-bottom: 0;
  }
}

.work_area {
  display: inline-block;
  vertical-align: top;
  width: 540px;
  position: relative;
  background: #fff;
  box-shadow: 0px 0px 1px 1px rgba(204, 204, 204, 0.6);
  margin: 0 0 0 20px;
  font-size: 16px;
}

.work_area__title {
  padding: 8px 0;
  border-bottom: 1px solid #cccccc;
  box-sizing: border-box;
  text-align: center;
  position: relative;
  font-size: 0;
}

.current_number {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  width: 70%;
}

.prev_number {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  min-height: 18px;
  width: 15%;
  cursor: pointer;
  transition: all 300ms ease;
  min-height: 22px;
  &:before {
    content: '';
    position: absolute;
    height: 15px;
    width: 2px;
    background: #566475; 
    left: 30px;
    top: 50%;
    transform: rotate(-45deg);
    transform-origin: 50% 0;
    transition: all 300ms ease;
  }
  &:after {
    content: '';
    position: absolute;
    height: 15px;
    width: 2px;
    background: #566475; 
    left: 30px;
    top: 50%;
    transform: rotate(-135deg);
    transform-origin: 50% 0;
    transition: all 300ms ease;
  }
  & .number__item {
    left: 30px;
  }
  &:hover {
    overflow: visible;
    &:before {
      background: #6c00ff;
      transform: rotate(-55deg);
    }
    &:after {
      background: #6c00ff;
      transform: rotate(-125deg);
    }
    & .number__item {
      left: 20px;
      opacity: 1;
      left: 35px;
    }
  }
}

.next_number {
  .prev_number;
  &:before {
    left: 50px;
    transform: rotate(45deg);
    transform-origin: 50% 0;
  }
  &:after {
    left: 50px;
    transform: rotate(135deg);
    transform-origin: 50% 0;
  }
  &:hover {
    &:before {
      background: #6c00ff;
      transform: rotate(55deg);
    }
    &:after {
      background: #6c00ff;
      transform: rotate(125deg);
    }
    & .number__item {
    left:  -95px;
    opacity: 1;
    }  
  }
  
  & .number__item {
    left:  -90px;
    }
}

.number__item {
  position: absolute;
  width: 150px;
  font-size: 12px;
  top: 50%;
  margin: -7px 0 0 0;
  transition: all 300ms ease;
  opacity: 0;
}

.work_area__container {
  font-size: 0;
}

.work_area__columns {
  width: 50%;
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  text-align: center;
  box-sizing: border-box;
  min-height: 155px;
  &:nth-child(1) {
    border-right: 1px dashed #ccc;
  }
}

.work_area__columns_title {
  padding: 10px;
  border-bottom: 1px dashed #ccc;
}

.work_area__item {
    width: 80%;
  margin: 0 auto;
  background: #fff;
  height: auto;
  min-height: 39px;
  padding: 10px 10px;
  box-sizing: border-box;
  border-bottom: 1px dashed #ccc;
}

.work_area__items_drop {
  min-height: 115px;
  position: relative;
}

.drop__here {
  position: absolute;
  height: 50px;
  width: 200px;
  border: 1px dashed #cccccc;
  left: 50%;
  top: 50%;
  margin: -25px 0 0 -100px;
  box-sizing: border-box;
  padding: 14px 0 0 0;
  -webkit-animation: hvr-icon-buzz-out 5000ms infinite both;
  -webkit-animation-delay: 3000ms;
}


/* Icon Buzz Out */
@-webkit-keyframes hvr-icon-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

@keyframes hvr-icon-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

.sidebar__toggler {
  position: absolute;
  right: -10px;
  top: 33px;
  background: #ffffff;
  padding: 0 10px;
  display: none;
  box-shadow: 0 0 2px 2px rgba(204, 204, 204, 0.6);
  &.visible {
    display: block;
  }
}

.toggler__item {
  padding: 10px 0;
  
  border-bottom: 1px dashed #cccccc;
  box-sizing: border-box; 
  &:first-child {
    border-top: 0;
  }
  &:last-child {
    border-bottom: 0;
  }
}