Home > database >  After appendto dropped item moves to a different position
After appendto dropped item moves to a different position

Time：03-17

Site page in question:

https://reubenanderson.com/nisswa_dock/dock-builder/

I have a project where a user can drag a section of a dock to a lake shore to create their own dock. This is inside of a wordpress page and I am having trouble with moving the dock section after it is dropped. When I drag the section it jumps to a different position and I cannot figure out why. When I add draggable to the section after it is appended, do I need to add the position information there as well? If so how? Could this be a conflict coming from Wordpress? I appreciate the help.

The jumping (moving position) problem in the snippet is not as bad as in the WordPress page.

EDIT: I am aware it's a heinous design. I am using garish colors so I can see the results of DIV padding, spacing etc. I am going for functionality then beauty.

$(document).ready(function()
{    
    
    // toggle div navigation for sections ------------------------
    
    $(".navSelect").click(function(event){
        event.preventDefault();
        
        $(".navSelect").removeClass("active").removeClass("on");
        $(this).addClass("active").addClass("on");
        var panel = $(this).attr('panel-id');
        
        $(".panel").hide();
        $("." panel).show();
        // removes hidden content at beginning of dock builder session
        $(".sectional_content").removeClass("hidden");
    });

    // dragging sections and appending ------------------------
    
    // To store cloned div
    var currentItem;

        $(".dragSection").draggable(
        {
            containment: ".dropPlacement",
            helper: "clone",
            cursor: "move",
            revert: true,
            // use generated gridlines as a snapping target
            snap: '.gridlines',
            snapMode: "outer",
        });

        $(".dropPlacement").droppable(
        {
            drop: function(event, ui) 
            {
            // Store cloned div in currentItem
            currentItem = ui.helper.clone();
            // Escape from revert the original div  
            ui.helper.remove();
            // To append the reverted image 
            currentItem.appendTo('.dropPlacement');
            var parent = $('.dropPlacement.ui-droppable');
            var leftAdjust = currentItem.position().left - parent.offset().left;
            var topAdjust = currentItem.position().top - parent.offset().top;
            currentItem.css({
              left: leftAdjust,
              top: topAdjust
            });

                // adding class 'selected' to make item selectable and give a visual indicator
                currentItem.click(function(){
                    $(this).toggleClass('selected');
                })     
            }
            
        });
// making image moveable after appendTo
     $(".dragSection").removeAttr("style");
     $(".dragSection").draggable({
        containment: ".dropPlacement",
        cursor: "move",
        revert: false,
        // use generated gridlines as a snapping target
        snap: '.gridlines',
        snapMode: "outer",
     });
    
// add delete function to selected items
    
    $(document).on('keydown', function(e){
    if(e.keyCode === 8){
       $('.selected').remove();
    }
    });
    
// reset the dropPlacement - reloads page
    $('.reset').click(function(){
        if(confirm("Are you sure you want to reset everything?")){
            window.location.reload();
        } else {
            return false;
        }
    });
    
    
// create grid to snap to
    function createGrid(size) {
    var i,
    sel = $('.dropPlacement'),
        height = sel.height(),
        width = sel.width(),
        ratioW = Math.floor(width / size),
        ratioH = Math.floor(height / size);

    for (i = 0; i <= ratioW; i  ) { // vertical grid lines
      $('<div />').css({
            'top': 'inherit',
            'left': i * size,
            'width': 1,
            'height': height
      })
        .addClass('gridlines')
        .appendTo(sel);
    }

    for (i = 0; i <= ratioH; i  ) { // horizontal grid lines
      $('<div />').css({
            'top': i * size,
            'left': 'inherit',
            'width': width,
            'height': 1
      })
        .addClass('gridlines')
        .appendTo(sel);
    }

    $('.gridlines').show();
    }
// set grid size, should never change from 10
createGrid(10);
    
});
@charset "utf-8";
.dropped {
  position: relative;
}

.gridlines {
  display: none;
  position: absolute;
  background-color: pink;
}

.zone-parent {
  display: flex
}

.dropPlacement {
  position: relative;
  width: 1000px;
  height: 1200px;
  grid-area: inner-div;
  z-index: 5;
}

.dragSection {
  cursor: move
}

#leftGradientGrid {
  background: #1E7784;
  background-image: url("https://reubenanderson.com/nisswa_dock/wp-content/uploads/2022/03/Water_Beach.png");
  width: 1000px;
  height: 1200px;
  display: grid;
  grid-template-areas: "inner-div";
}

.measurements {
  background-image: url("https://reubenanderson.com/nisswa_dock/wp-content/uploads/2022/03/Measurements_v3.png");
  background-repeat: no-repeat;
  width: 1000px;
  height: 1200px;
  position: relative;
  top: 5px;
  grid-area: inner-div;
  z-index: 3;
  opacity: .5;
}

.gridPattern {
  background-repeat: repeat;
  background-image: url("https://reubenanderson.com/nisswa_dock/wp-content/uploads/2022/03/Grid_Piece_v2.png");
  width: auto;
  height: 1200px;
  opacity: 0.2;
  grid-area: inner-div;
  z-index: 2;
}

.gridPlacement {
  position: absolute;
  width: 1000px;
  height: 1200px;
  grid-area: inner-div;
  z-index: 4;
}

.rightBlock {
  background: #684411;
  width: auto;
  padding: 10px;
}


/* this is for all sections */

.sectional_content {
  background-color: #4E2B00;
  display: grid;
}

.sectionTitle {
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
  font-style: bold;
  width: auto;
  text-align: center;
  background-color: aquamarine;
  grid-area: header;
  padding-top: 2px;
  margin: 3px;
}


/* navigation and buttons */

.rightBlockHeader {
  background-color: #72632F;
  padding: 5px
}

.navigation {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 3px;
}

.navButton {
  background-color: cornflowerblue;
  border: 1px #0D1F37;
  border-style: solid;
  cursor: pointer;
  margin: 2px;
}

.active {
  background-color: darkcyan
}

.on {
  background-color: brown
}

.instructions {
  background-color: #A29595;
  text-align: center
}

.hidden {
  display: none
}

.dragSection {
  cursor: move
}

.reset {
  width: 80px;
  height: auto;
  cursor: pointer;
  background-color: crimson
}


/* this is for the 4x4 section --------------------- */

.fourByFourSectionals {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 5px;
  padding: 10px;
  grid-template-areas: "header header header"
}


/* vertical sections */

.fourByFour {
  background-color: antiquewhite;
  border-color: #000000;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  padding: 3px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  font-size: x-small;
  text-align: center;
  margin: auto;
  padding-top: auto;
}

.sectional_4x4_vertical_drag {
  width: 40px;
  height: 40px;
}

.sectional_4x8_vertical_drag {
  width: 40px;
  height: 80px;
}

.sectional_4x10_vertical_drag {
  width: 40px;
  height: 100px;
}

.sectional_4x12_vertical_drag {
  width: 40px;
  height: 120px;
}


/* miter sections */

.fourByFourMiters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr
}

.sectional_4x4_miter_upper-left_drag {
  background-image: url("../images/dock_pieces/sectional/miter/4x4_Miter_Top-Left.png");
  width: 40px;
  height: 40px;
}

.sectional_4x4_miter_upper-right_drag {
  background-image: url("../images/dock_pieces/sectional/miter/4x4_Miter_Top-Right.png");
  width: 40px;
  height: 40px;
}

.sectional_4x4_miter_lower-left_drag {
  background-image: url("../images/dock_pieces/sectional/miter/4x4_Miter_Bottom-Left.png");
  width: 40px;
  height: 40px;
}

.sectional_4x4_miter_lower-right_drag {
  background-image: url("../images/dock_pieces/sectional/miter/4x4_Miter_Bottom-Right.png");
  width: 40px;
  height: 40px;
}


/* horizontal sections */

.sectional_4x8_horizontal_drag {
  width: 80px;
  height: 40px;
}

.sectional_4x10_horizontal_drag {
  width: 100px;
  height: 40px;
}

.sectional_4x12_horizontal_drag {
  width: 120px;
  height: 40px;
}


/* this is for the 5x5 section --------------------- */

.allFiveByFiveSectionals {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 5px;
  padding: 10px;
  grid-template-areas: "header header header"
}

.fiveByFive {
  background-color: antiquewhite;
  border-color: #000000;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  padding: 3px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  font-size: x-small;
  text-align: center;
  margin: auto;
  padding-top: auto;
}


/* vertical sections */

.fiveByFour_vertical {
  width: 50px;
  height: 40px;
}

.fiveByEight_vertical {
  width: 50px;
  height: 80px;
}

.sectional_5x10_vertical_drag {
  width: 50px;
  height: 100px;
}

.sectional_5x12_vertical_drag {
  width: 50px;
  height: 120px;
}


/* horizontal sections */

.sectional_5x8_horizontal_drag {
  width: 80px;
  height: 50px;
}

.sectional_5x10_horizontal_drag {
  width: 100px;
  height: 50px;
}

.sectional_5x12_horizontal_drag {
  width: 120px;
  height: 50px;
}


/* 5x5 miter */

.fiveByFiveMiters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr
}

.sectional_5x4_miter_upper-left_drag {
  width: 50px;
  height: 50px;
  background-image: url("../images/dock_pieces/sectional/miter/5x5_Miter_Top-Left.png");
}

.sectional_5x4_miter_upper-right_drag {
  width: 50px;
  height: 50px;
  background-image: url("../wordpress/wp-content/uploads/2022/03/5x5_Miter_Top-Right.png");
}

.sectional_5x4_miter_lower-left_drag {
  width: 50px;
  height: 50px;
  background-image: url("../images/dock_pieces/sectional/miter/5x5_Miter_Bottom-Left.png");
}

.sectional_5x4_miter_lower-right_drag {
  width: 50px;
  height: 50px;
  background-image: url("../images/dock_pieces/sectional/miter/5x5_Miter_Bottom-Right.png");
}


/* floating sectionals */

.floating {
  background-color: #70A74A;
  border-color: #000000;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  padding: 3px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  font-size: x-small;
  text-align: center;
  margin: auto;
  padding-top: auto;
}

.floatingSectionals {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 5px;
  padding: 10px;
  grid-template-areas: "header header header"
}

.floatingFiveByEightVertical {
  width: 50px;
  height: 80px;
}

.floatingFiveByTenVertical {
  width: 50px;
  height: 100px;
}

.floatingFiveByTwelveVertical {
  width: 50px;
  height: 120px;
}

.floatingFiveBySixteenVertical {
  width: 50px;
  height: 160px;
}

.floatingFiveByEightHorizontal {
  width: 80px;
  height: 50px;
}

.floatingFiveByTenHorizontal {
  width: 100px;
  height: 50px;
}

.floatingFiveByTwelveHorizontal {
  width: 120px;
  height: 50px;
}

.floatingFiveBySixteenHorizontal {
  width: 160px;
  height: 50px;
}


/* Roll In and Ramp */

.rollInsRampSectionals {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 5px;
  padding: 10px;
  grid-template-areas: "header header header"
}

.rollInRamp {
  background-color: #A47299;
  border-color: #000000;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  padding: 3px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  font-size: x-small;
  text-align: center;
  margin: auto;
  padding-top: auto;
}

.sixteenEightyEightLeft {
  width: 80px;
  height: 160px;
  border: none;
  background-color: transparent;
  background-image: url("../images/dock_pieces/roll-in_ramps/1688_Left.png")
}

.sixteenEightyEightRight {
  width: 80px;
  height: 160px;
  border: none;
  background-color: transparent;
  background-image: url("../images/dock_pieces/roll-in_ramps/1688_Right.png")
}

.sixteenTenLeft {
  width: 100px;
  height: 160px;
  border: none;
  background-color: transparent;
  background-image: url("../images/dock_pieces/roll-in_ramps/16108_Left.png");
}

.sixteenTenRight {
  width: 100px;
  height: 160px;
  border: none;
  background-color: transparent;
  background-image: url("../images/dock_pieces/roll-in_ramps/16108_Right.png");
}

.fourByFourRamp {
  width: 40px;
  height: 40px
}

.fourBySixRamp {
  width: 40px;
  height: 60px
}

.fourByEightRamp {
  width: 40px;
  height: 80px
}

.fourByTenRamp {
  width: 40px;
  height: 100px
}

.fourBySixteenRamp {
  width: 40px;
  height: 160px
}


/* Boat Lifts */

.boatLiftsSectionals {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 5px;
  padding: 10px;
  grid-template-areas: "header header header";
  max-height: 100%;
  overflow: auto;
}

.boatLift {
  background-color: #D08913;
  border-color: #000000;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  padding: 3px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  font-size: x-small;
  text-align: center;
  margin: auto;
  padding-top: auto;
}

.pwcVertical {
  width: 40px;
  height: 60px
}

.pwcHorizontal {
  width: 60px;
  height: 40px
}

.elevenTwentyFour {
  width: 110px;
  height: 240px;
}

.elevenTwentySix {
  width: 110px;
  height: 260px;
}

.elevenTwentyEight {
  width: 110px;
  height: 280px;
}

.elevenThirty {
  width: 110px;
  height: 300px;
}

.twelveTwentyFour {
  width: 120px;
  height: 240px;
}

.twelveTwentySix {
  width: 120px;
  height: 260px;
}

.twelveTwentyEight {
  width: 120px;
  height: 280px;
}

.twelveThirty {
  width: 120px;
  height: 300px;
}

.selected {
  outline: 2px solid crimson;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div >
  <!-- the landing area for dock sections-->
  <div id="leftGradientGrid">
    <div ></div>
    <div ></div>
    <div >
    </div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
  <!-- this is where the pieces for the docks go, create draggable area. Snap to grid 10x10px-->
  <div >
    <div >
      <p>Welcome to Nisswa Dock, please use our dock builder to fully realize your future project</p>
      <div >
        <div  panel-id="fourByFourWithFiveByFive">
          <p> Sectionals </p>
        </div>
        <div  panel-id="floatingSectionals">
          <p>Floating</p>
        </div>
        <div  panel-id="rollInsRampSectionals">
          <p> Roll-In/Ramps</p>
        </div>
        <div  panel-id="boatLiftsSectionals">
          <p> Boat Lifts </p>
        </div>
      </div>
      <div >
        <p> Please choose from a section above to start building your dock. To delete a dock section click it and press the backspace key on your keyboard.&nbsp; &nbsp; &nbsp;&nbsp; </p>
        <div >
          <p> Reset all Elements </p>
        </div>
        <div>
          [save_as_image_pdfcrowd] [print-me target="#leftGradientGrid"/]
        </div>
      </div>
    </div>
    <!-- hidden will be removed upon click in nav -->
    <div >
      <div >
        <div >
          <div >
            <p>4ft wide sections</p>
          </div>
          <div >
            <p> 4x4 </p>
          </div>
          <div >
            <p> 4x8 </p>
          </div>
          <div >
            <p> 4x10 </p>
          </div>
          <div >
            <p> 4x12 </p>
          </div>
          <div >
            <p> 4x8 </p>
          </div>
          <div >
            <p> 4x10 </p>
          </div>
          <div >
            <p> 4x12 </p>
          </div>
          <div >
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
          </div>
        </div>
        <!--5 by 5 Dock sections -->
        <div >
          <div >
            <p> 5ft wide sections </p>
          </div>
          <div >
            <p> 5x4 </p>
          </div>
          <div >
            <p> 5x8 </p>
          </div>
          <div >
            <p> 5x10 </p>
          </div>
          <div >
            <p> 5x12 </p>
          </div>
          <div >
            <p> 5x8 </p>
          </div>
          <div >
            <p> 5x10 </p>
          </div>
          <div >
            <p> 5x12 </p>
          </div>
          <div >
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
          </div>
        </div>
      </div>
      <div >
        <div >
          <p> Floating Dock Sections </p>
        </div>
        <div >
          <p> 5x8 Floating </p>
        </div>
        <div >
          <p> 5x10 Floating </p>
        </div>
        <div >
          <p> 5x12 Floating </p>
        </div>
        <div >
          <p> 5x16 Floating </p>
        </div>
        <div >
          <p> 5x8 Floating </p>
        </div>
        <div >
          <p> 5x10 Floating </p>
        </div>
        <div >
          <p> 5x12 Floating </p>
        </div>
        <div >
          <p> 5x16 Floating </p>
        </div>
      </div>
      <div >
        <div >
          <p> Roll In and Ramps </p>
        </div>
        <div >
          <p> 1688 Roll-In </p>
        </div>
        <div >
          <p> 1688 Roll-In </p>
        </div>
        <div >
          <p> 16108 Roll-In </p>
        </div>
        <div >
          <p> 16108 Roll-In </p>
        </div>
        <div >
          <p> 4x4 Ramp </p>
        </div>
        <div >
          <p> 4x6 Ramp </p>
        </div>
        <div >
          <p> 4x8 Ramp </p>
        </div>
        <div >
          <p> 4x10 Ramp </p>
        </div>
        <div >
          <p> 4x16 </p>
        </div>
      </div>
      <div >
        <div >
          <p>Boat Lifts</p>
        </div>
        <div >
          <p> PWC </p>
        </div>
        <div >
          <p> PWC </p>
        </div>
        <div >
          <p> 11x24</p>
        </div>
        <div >
          <p> 11x26</p>
        </div>
        <div >
          <p> 11x28</p>
        </div>
        <div >
          <p> 11x30</p>
        </div>
        <div >
          <p> 12x24</p>
        </div>
        <div >
          <p> 12x26</p>
        </div>
        <div >
          <p> 12x28</p>
        </div>
        <div >
          <p> 12x30</p>
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

Consider the following example.

$(document).ready(function() {

  // toggle div navigation for sections ------------------------

  $(".navSelect").click(function(event) {
    event.preventDefault();

    $(".active.on").removeClass("active on");
    $(this).addClass("active on");
    var panel = $(this).attr('panel-id');

    $(".panel").hide();
    $("."   panel).show();
    // removes hidden content at beginning of dock builder session
    $(".sectional_content").removeClass("hidden");
  });

  // dragging sections and appending ------------------------

  // To store cloned div
  var currentItem;

  $(".dragSection").draggable({
    containment: ".dropPlacement",
    helper: "clone",
    cursor: "move",
    revert: true,
    // use generated gridlines as a snapping target
    snap: '.gridlines',
    snapMode: "outer",
    zIndex: 1000
  });

  $(".dropPlacement").droppable({
    drop: function(event, ui) {
      currentItem = ui.helper.clone();
      ui.helper.remove();
      if (currentItem.hasClass("dragSection")) {
        currentItem.removeClass("dragSection").appendTo(this).css({
          top: ui.position.top - $(this).offset().top,
          left: ui.position.left - $(this).offset().left
        });
      } else {
        currentItem.appendTo(this);
      }

      // make element draggable after appendTo
      currentItem.draggable({
        containment: ".dropPlacement",
        snap: '.gridlines',
        snapMode: "outer",
        cursor: "move",
        revert: true,
      });

      // adding class 'selected' to make item selectable and give a visual indicator
      currentItem.click(function() {
        $(this).toggleClass('selected');
      })
    }

  });
  // making image moveable after appendTo


  // add delete function to selected items

  $(document).on('keydown', function(e) {
    if (e.keyCode === 8) {
      $('.selected').remove();
    }
  });

  // reset the dropPlacement - reloads page
  $('.reset').click(function() {
    if (confirm("Are you sure you want to reset everything?")) {
      window.location.reload();
    } else {
      return false;
    }
  });


  // create grid to snap to
  function createGrid(size) {
    var i,
      sel = $('.dropPlacement'),
      height = sel.height(),
      width = sel.width(),
      ratioW = Math.floor(width / size),
      ratioH = Math.floor(height / size);

    for (i = 0; i <= ratioW; i  ) { // vertical grid lines
      $('<div />').css({
          'top': 'inherit',
          'left': i * size,
          'width': 1,
          'height': height
        })
        .addClass('gridlines')
        .appendTo(sel);
    }

    for (i = 0; i <= ratioH; i  ) { // horizontal grid lines
      $('<div />').css({
          'top': i * size,
          'left': 'inherit',
          'width': width,
          'height': 1
        })
        .addClass('gridlines')
        .appendTo(sel);
    }

    $('.gridlines').show();
  }
  // set grid size, should never change from 10
  createGrid(10);

});
@charset "utf-8";
.dropped {
  position: relative;
}

.gridlines {
  display: none;
  position: absolute;
  background-color: pink;
}

.zone-parent {
  display: flex
}

.dropPlacement {
  position: relative;
  width: 1000px;
  height: 1200px;
  grid-area: inner-div;
  z-index: 5;
}

.dragSection {
  cursor: move
}

#leftGradientGrid {
  background: #1E7784;
  background-image: url("https://reubenanderson.com/nisswa_dock/wp-content/uploads/2022/03/Water_Beach.png");
  width: 1000px;
  height: 1200px;
  display: grid;
  grid-template-areas: "inner-div";
}

.measurements {
  background-image: url("https://reubenanderson.com/nisswa_dock/wp-content/uploads/2022/03/Measurements_v3.png");
  background-repeat: no-repeat;
  width: 1000px;
  height: 1200px;
  position: relative;
  top: 5px;
  grid-area: inner-div;
  z-index: 3;
  opacity: .5;
}

.gridPattern {
  background-repeat: repeat;
  background-image: url("https://reubenanderson.com/nisswa_dock/wp-content/uploads/2022/03/Grid_Piece_v2.png");
  width: auto;
  height: 1200px;
  opacity: 0.2;
  grid-area: inner-div;
  z-index: 2;
}

.gridPlacement {
  position: absolute;
  width: 1000px;
  height: 1200px;
  grid-area: inner-div;
  z-index: 4;
}

.rightBlock {
  background: #684411;
  width: auto;
  padding: 10px;
}


/* this is for all sections */

.sectional_content {
  background-color: #4E2B00;
  display: grid;
}

.sectionTitle {
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
  font-style: bold;
  width: auto;
  text-align: center;
  background-color: aquamarine;
  grid-area: header;
  padding-top: 2px;
  margin: 3px;
}


/* navigation and buttons */

.rightBlockHeader {
  background-color: #72632F;
  padding: 5px
}

.navigation {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 3px;
}

.navButton {
  background-color: cornflowerblue;
  border: 1px #0D1F37;
  border-style: solid;
  cursor: pointer;
  margin: 2px;
}

.active {
  background-color: darkcyan
}

.on {
  background-color: brown
}

.instructions {
  background-color: #A29595;
  text-align: center
}

.hidden {
  display: none
}

.dragSection {
  cursor: move
}

.reset {
  width: 80px;
  height: auto;
  cursor: pointer;
  background-color: crimson
}


/* this is for the 4x4 section --------------------- */

.fourByFourSectionals {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 5px;
  padding: 10px;
  grid-template-areas: "header header header"
}


/* vertical sections */

.fourByFour {
  background-color: antiquewhite;
  border-color: #000000;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  padding: 3px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  font-size: x-small;
  text-align: center;
  margin: auto;
  padding-top: auto;
}

.sectional_4x4_vertical_drag {
  width: 40px;
  height: 40px;
}

.sectional_4x8_vertical_drag {
  width: 40px;
  height: 80px;
}

.sectional_4x10_vertical_drag {
  width: 40px;
  height: 100px;
}

.sectional_4x12_vertical_drag {
  width: 40px;
  height: 120px;
}


/* miter sections */

.fourByFourMiters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr
}

.sectional_4x4_miter_upper-left_drag {
  background-image: url("../images/dock_pieces/sectional/miter/4x4_Miter_Top-Left.png");
  width: 40px;
  height: 40px;
}

.sectional_4x4_miter_upper-right_drag {
  background-image: url("../images/dock_pieces/sectional/miter/4x4_Miter_Top-Right.png");
  width: 40px;
  height: 40px;
}

.sectional_4x4_miter_lower-left_drag {
  background-image: url("../images/dock_pieces/sectional/miter/4x4_Miter_Bottom-Left.png");
  width: 40px;
  height: 40px;
}

.sectional_4x4_miter_lower-right_drag {
  background-image: url("../images/dock_pieces/sectional/miter/4x4_Miter_Bottom-Right.png");
  width: 40px;
  height: 40px;
}


/* horizontal sections */

.sectional_4x8_horizontal_drag {
  width: 80px;
  height: 40px;
}

.sectional_4x10_horizontal_drag {
  width: 100px;
  height: 40px;
}

.sectional_4x12_horizontal_drag {
  width: 120px;
  height: 40px;
}


/* this is for the 5x5 section --------------------- */

.allFiveByFiveSectionals {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 5px;
  padding: 10px;
  grid-template-areas: "header header header"
}

.fiveByFive {
  background-color: antiquewhite;
  border-color: #000000;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  padding: 3px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  font-size: x-small;
  text-align: center;
  margin: auto;
  padding-top: auto;
}


/* vertical sections */

.fiveByFour_vertical {
  width: 50px;
  height: 40px;
}

.fiveByEight_vertical {
  width: 50px;
  height: 80px;
}

.sectional_5x10_vertical_drag {
  width: 50px;
  height: 100px;
}

.sectional_5x12_vertical_drag {
  width: 50px;
  height: 120px;
}


/* horizontal sections */

.sectional_5x8_horizontal_drag {
  width: 80px;
  height: 50px;
}

.sectional_5x10_horizontal_drag {
  width: 100px;
  height: 50px;
}

.sectional_5x12_horizontal_drag {
  width: 120px;
  height: 50px;
}


/* 5x5 miter */

.fiveByFiveMiters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr
}

.sectional_5x4_miter_upper-left_drag {
  width: 50px;
  height: 50px;
  background-image: url("../images/dock_pieces/sectional/miter/5x5_Miter_Top-Left.png");
}

.sectional_5x4_miter_upper-right_drag {
  width: 50px;
  height: 50px;
  background-image: url("../wordpress/wp-content/uploads/2022/03/5x5_Miter_Top-Right.png");
}

.sectional_5x4_miter_lower-left_drag {
  width: 50px;
  height: 50px;
  background-image: url("../images/dock_pieces/sectional/miter/5x5_Miter_Bottom-Left.png");
}

.sectional_5x4_miter_lower-right_drag {
  width: 50px;
  height: 50px;
  background-image: url("../images/dock_pieces/sectional/miter/5x5_Miter_Bottom-Right.png");
}


/* floating sectionals */

.floating {
  background-color: #70A74A;
  border-color: #000000;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  padding: 3px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  font-size: x-small;
  text-align: center;
  margin: auto;
  padding-top: auto;
}

.floatingSectionals {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 5px;
  padding: 10px;
  grid-template-areas: "header header header"
}

.floatingFiveByEightVertical {
  width: 50px;
  height: 80px;
}

.floatingFiveByTenVertical {
  width: 50px;
  height: 100px;
}

.floatingFiveByTwelveVertical {
  width: 50px;
  height: 120px;
}

.floatingFiveBySixteenVertical {
  width: 50px;
  height: 160px;
}

.floatingFiveByEightHorizontal {
  width: 80px;
  height: 50px;
}

.floatingFiveByTenHorizontal {
  width: 100px;
  height: 50px;
}

.floatingFiveByTwelveHorizontal {
  width: 120px;
  height: 50px;
}

.floatingFiveBySixteenHorizontal {
  width: 160px;
  height: 50px;
}


/* Roll In and Ramp */

.rollInsRampSectionals {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 5px;
  padding: 10px;
  grid-template-areas: "header header header"
}

.rollInRamp {
  background-color: #A47299;
  border-color: #000000;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  padding: 3px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  font-size: x-small;
  text-align: center;
  margin: auto;
  padding-top: auto;
}

.sixteenEightyEightLeft {
  width: 80px;
  height: 160px;
  border: none;
  background-color: transparent;
  background-image: url("../images/dock_pieces/roll-in_ramps/1688_Left.png")
}

.sixteenEightyEightRight {
  width: 80px;
  height: 160px;
  border: none;
  background-color: transparent;
  background-image: url("../images/dock_pieces/roll-in_ramps/1688_Right.png")
}

.sixteenTenLeft {
  width: 100px;
  height: 160px;
  border: none;
  background-color: transparent;
  background-image: url("../images/dock_pieces/roll-in_ramps/16108_Left.png");
}

.sixteenTenRight {
  width: 100px;
  height: 160px;
  border: none;
  background-color: transparent;
  background-image: url("../images/dock_pieces/roll-in_ramps/16108_Right.png");
}

.fourByFourRamp {
  width: 40px;
  height: 40px
}

.fourBySixRamp {
  width: 40px;
  height: 60px
}

.fourByEightRamp {
  width: 40px;
  height: 80px
}

.fourByTenRamp {
  width: 40px;
  height: 100px
}

.fourBySixteenRamp {
  width: 40px;
  height: 160px
}


/* Boat Lifts */

.boatLiftsSectionals {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 5px;
  padding: 10px;
  grid-template-areas: "header header header";
  max-height: 100%;
  overflow: auto;
}

.boatLift {
  background-color: #D08913;
  border-color: #000000;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  padding: 3px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  font-size: x-small;
  text-align: center;
  margin: auto;
  padding-top: auto;
}

.pwcVertical {
  width: 40px;
  height: 60px
}

.pwcHorizontal {
  width: 60px;
  height: 40px
}

.elevenTwentyFour {
  width: 110px;
  height: 240px;
}

.elevenTwentySix {
  width: 110px;
  height: 260px;
}

.elevenTwentyEight {
  width: 110px;
  height: 280px;
}

.elevenThirty {
  width: 110px;
  height: 300px;
}

.twelveTwentyFour {
  width: 120px;
  height: 240px;
}

.twelveTwentySix {
  width: 120px;
  height: 260px;
}

.twelveTwentyEight {
  width: 120px;
  height: 280px;
}

.twelveThirty {
  width: 120px;
  height: 300px;
}

.selected {
  outline: 2px solid crimson;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div >
  <!-- the landing area for dock sections-->
  <div id="leftGradientGrid">
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
  <!-- this is where the pieces for the docks go, create draggable area. Snap to grid 10x10px-->
  <div >
    <div >
      <p>Welcome to Nisswa Dock, please use our dock builder to fully realize your future project</p>
      <div >
        <div  panel-id="fourByFourWithFiveByFive">
          <p> Sectionals </p>
        </div>
        <div  panel-id="floatingSectionals">
          <p>Floating</p>
        </div>
        <div  panel-id="rollInsRampSectionals">
          <p> Roll-In/Ramps</p>
        </div>
        <div  panel-id="boatLiftsSectionals">
          <p> Boat Lifts </p>
        </div>
      </div>
      <div >
        <p> Please choose from a section above to start building your dock. To delete a dock section click it and press the backspace key on your keyboard.&nbsp; &nbsp; &nbsp;&nbsp; </p>
        <div >
          <p> Reset all Elements </p>
        </div>
        <div>
          [save_as_image_pdfcrowd] [print-me target="#leftGradientGrid"/]
        </div>
      </div>
    </div>
    <!-- hidden will be removed upon click in nav -->
    <div >
      <div >
        <div >
          <div >
            <p>4ft wide sections</p>
          </div>
          <div >
            <p> 4x4 </p>
          </div>
          <div >
            <p> 4x8 </p>
          </div>
          <div >
            <p> 4x10 </p>
          </div>
          <div >
            <p> 4x12 </p>
          </div>
          <div >
            <p> 4x8 </p>
          </div>
          <div >
            <p> 4x10 </p>
          </div>
          <div >
            <p> 4x12 </p>
          </div>
          <div >
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
          </div>
        </div>
        <!--5 by 5 Dock sections -->
        <div >
          <div >
            <p> 5ft wide sections </p>
          </div>
          <div >
            <p> 5x4 </p>
          </div>
          <div >
            <p> 5x8 </p>
          </div>
          <div >
            <p> 5x10 </p>
          </div>
          <div >
            <p> 5x12 </p>
          </div>
          <div >
            <p> 5x8 </p>
          </div>
          <div >
            <p> 5x10 </p>
          </div>
          <div >
            <p> 5x12 </p>
          </div>
          <div >
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
          </div>
        </div>
      </div>
      <div >
        <div >
          <p> Floating Dock Sections </p>
        </div>
        <div >
          <p> 5x8 Floating </p>
        </div>
        <div >
          <p> 5x10 Floating </p>
        </div>
        <div >
          <p> 5x12 Floating </p>
        </div>
        <div >
          <p> 5x16 Floating </p>
        </div>
        <div >
          <p> 5x8 Floating </p>
        </div>
        <div >
          <p> 5x10 Floating </p>
        </div>
        <div >
          <p> 5x12 Floating </p>
        </div>
        <div >
          <p> 5x16 Floating </p>
        </div>
      </div>
      <div >
        <div >
          <p> Roll In and Ramps </p>
        </div>
        <div >
          <p> 1688 Roll-In </p>
        </div>
        <div >
          <p> 1688 Roll-In </p>
        </div>
        <div >
          <p> 16108 Roll-In </p>
        </div>
        <div >
          <p> 16108 Roll-In </p>
        </div>
        <div >
          <p> 4x4 Ramp </p>
        </div>
        <div >
          <p> 4x6 Ramp </p>
        </div>
        <div >
          <p> 4x8 Ramp </p>
        </div>
        <div >
          <p> 4x10 Ramp </p>
        </div>
        <div >
          <p> 4x16 </p>
        </div>
      </div>
      <div >
        <div >
          <p>Boat Lifts</p>
        </div>
        <div >
          <p> PWC </p>
        </div>
        <div >
          <p> PWC </p>
        </div>
        <div >
          <p> 11x24</p>
        </div>
        <div >
          <p> 11x26</p>
        </div>
        <div >
          <p> 11x28</p>
        </div>
        <div >
          <p> 11x30</p>
        </div>
        <div >
          <p> 12x24</p>
        </div>
        <div >
          <p> 12x26</p>
        </div>
        <div >
          <p> 12x28</p>
        </div>
        <div >
          <p> 12x30</p>
        </div>
      </div>
    </div>
  </div>
</div>

Initially, the adjusted position was being removed after it was adjusted. My suggested was to remove it before, and then apply your own styling to place it where you wanted. Sorry if that was unclear.

As the draggable is already snapping, we just need to ensure it is appended with the correct position. Your offset works as expected for this, but only on the first drop. Future drag n drops should not need this.

Page link：https//www.codepudding.com/database/337519.html

Prev:Jquery, matching values without an exact match
Next:How to catch click in wordpress menu item
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding