Johni Devo Johni Devo - 6 months ago 42
HTML Question

Drag and drop a div tag on grids row with jQuery widgets

I try to drag a

div
on a grids system rows, and to find out on witch rows he is positioned after is drop it:

https://jsfiddle.net/johnidevo/08f83op9/5/

________________________________________________
droppable_area_(grids)__________________________
1row____________________________________________
2row____________________________________________
3row___-----------------------------------------
4row___| draggable <div> |
5row___| |
6row___-----------------------------------------
7row____________________________________________
(<div>'s)_______________________________________


My code is as follow:

jQuery( object ).draggable({
snap: ".selectable",
containment: "#droppable_area",
axis: "y",
drag: function( event, ui ){
console.log( jQuery( this ).parent() );
}
});

jQuery('.selectable').droppable({
drop: function( event, ui ) {
console.log( jQuery( this ) );
}
});


With
console.log( jQuery( this ) );
when
draggable <div>
is only one row height size it's work fine, after if is bigger than 1 row size it's fails why?

Answer

For now I will use this code until later versions!

jQuery(document).ready(function() {
  var target;
  jQuery('#1463419359713').draggable({
    snap: ".selectable",
    containment: "#day_kalendar",
    axis: "y",
    cursor: "crosshair",
    cursorAt: {
      top: 0
    }
  });

  jQuery('.selectable').droppable({
    tolerance: "pointer",
    drop: function(event, ui) {
      var wrapper = jQuery(event.target).parent().attr("id");
      var eventHeight = jQuery('#1463419359713').height() / (jQuery(".selectable:first").height() + 1);
      var starthour = jQuery(event.target).attr("data-hour");
      var nexthour = parseInt(wrapper) + Math.round(eventHeight);
      nexthour = jQuery('#' + nexthour + ' div:nth-child(2)').attr("data-hour");
      jQuery('#1463419359713').children('#eventHours').text(starthour + ' - ' + nexthour);
    }
  });
});
.ui-selectable .ui-selected {
  background-color: #a6c9e2;
}
.ui-selectable .ui-selecting {
  background: #FECA40;
}
.ui-selectable-helper {
  position: absolute;
  z-index: 100;
  border: none;
}
.ui-dialog-titlebar {
  background: transparent;
  border: none;
}
[class*="col-"] {
  float: left;
  padding: 0px;
}
.col-1 {
  width: 8.33%;
}
.col-2 {
  width: 16.66%;
}
.col-3 {
  width: 25%;
}
.col-4 {
  width: 33.33%;
}
.col-5 {
  width: 41.66%;
}
.col-6 {
  width: 50%;
}
.col-7 {
  width: 58.33%;
}
.col-8 {
  width: 66.66%;
}
.col-9 {
  width: 75%;
}
.col-10 {
  width: 83.33%;
}
.col-11 {
  width: 91.66%;
}
.col-12 {
  width: 100%;
}
.row::after {
  content: "";
  clear: both;
  display: block;
}
.text-right {
  text-align: right;
}
.cornsilk {
  background-color: #E0E0E0;
}
.forestgreen {
  background-color: forestgreen;
}
.limegreen {
  background-color: limegreen;
}
.dimgrey {
  background-color: dimgrey;
  color: white;
}
.border-up {
  border-top: 1px solid white;
}
.border-up-dashed {
  border-top: 1px dashed white;
}
.fix-border {
  border-top: 1px solid dimgrey;
}
.selectable {
  position: relative;
}
.newevent {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0px;
  width: 100%;
  height: auto;
  z-index: 1;
  /*opacity: 0.7;*/
  border-radius: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js"></script>
<div id="day_kalendar" class="ui-selectable">
  <div id="1" class="row border-up">
    <div class="col-1 dimgrey text-right"><span>10AM</span>
    </div>
    <div data-hour="10 am" data-nexthour="10:30 am" class="col-11 cornsilk selectable ui-selectee">
      <span>&nbsp;</span>
    </div>
  </div>
  <div id="2" class="row">
    <div class="col-1 dimgrey fix-border">&nbsp;</div>
    <div data-hour="10:30 am" data-nexthour="11 am" class="col-11 border-up-dashed cornsilk selectable ui-selectee">
      <span>&nbsp;</span>
    </div>
  </div>
  <div id="3" class="row border-up">
    <div class="col-1 dimgrey text-right"><span>11AM</span>
    </div>
    <div data-hour="11 am" data-nexthour="11:30 am" class="col-11 cornsilk selectable ui-selectee">
      <span>&nbsp;</span>
    </div>
  </div>
  <div id="4" class="row">
    <div class="col-1 dimgrey fix-border">&nbsp;</div>
    <div data-hour="11:30 am" data-nexthour="12 pm" class="col-11 border-up-dashed cornsilk selectable ui-selectee">
      <span>&nbsp;</span>
    </div>
  </div>
  <div id="5" class="row border-up">
    <div class="col-1 dimgrey text-right"><span>12PM</span>
    </div>
    <div data-hour="12 pm" data-nexthour="12:30 pm" class="col-11 cornsilk selectable ui-selectee">
      <span>&nbsp;</span>
      <div id="1463419359713" class="newevent ui-draggable forestgreen" style="height: 92px;"><span id="eventHours">12 pm - 2 pm</span>
        <br><span id="eventTitle">(No title)</span>
        <div class="ui-resizable-handle ui-resizable-s"></div>
      </div>
    </div>
  </div>
  <div id="6" class="row">
    <div class="col-1 dimgrey fix-border">&nbsp;</div>
    <div data-hour="12:30 pm" data-nexthour="1 pm" class="col-11 border-up-dashed cornsilk selectable ui-selectee">
      <span>&nbsp;</span>
    </div>
  </div>
  <div id="7" class="row border-up">
    <div class="col-1 dimgrey text-right"><span>1PM</span>
    </div>
    <div data-hour="1 pm" data-nexthour="1:30 pm" class="col-11 cornsilk selectable ui-selectee">
      <span>&nbsp;</span>
    </div>
  </div>
  <div id="8" class="row">
    <div class="col-1 dimgrey fix-border">&nbsp;</div>
    <div data-hour="1:30 pm" data-nexthour="2 pm" class="col-11 border-up-dashed cornsilk selectable ui-selectee">
      <span>&nbsp;</span>
    </div>
  </div>
  <div id="9" class="row border-up">
    <div class="col-1 dimgrey text-right"><span>2PM</span>
    </div>
    <div data-hour="2 pm" data-nexthour="2:30 pm" class="col-11 cornsilk selectable ui-selectee">
      <span>&nbsp;</span>
    </div>
  </div>
  <div id="10" class="row">
    <div class="col-1 dimgrey fix-border">&nbsp;</div>
    <div data-hour="2:30 pm" data-nexthour="3 pm" class="col-11 border-up-dashed cornsilk selectable ui-selectee">
      <span>&nbsp;</span>
    </div>
  </div>
  <div id="11" class="row border-up">
    <div class="col-1 dimgrey text-right"><span>3PM</span>
    </div>
    <div data-hour="3 pm" data-nexthour="3:30 pm" class="col-11 cornsilk selectable ui-selectee">
      <span>&nbsp;</span>
    </div>
  </div>
  <div id="12" class="row">
    <div class="col-1 dimgrey fix-border">&nbsp;</div>
    <div data-hour="3:30 pm" data-nexthour="4 pm" class="col-11 border-up-dashed cornsilk selectable ui-selectee">
      <span>&nbsp;</span>
    </div>
  </div>
  <div id="13" class="row border-up">
    <div class="col-1 dimgrey text-right"><span>4PM</span>
    </div>
    <div data-hour="4 pm" data-nexthour="4:30 pm" class="col-11 cornsilk selectable ui-selectee">
      <span>&nbsp;</span>
    </div>
  </div>
</div>