Search code examples
javascriptjqueryjquery-ui-draggablejquery-ui-droppable

After appendto dropped item moves to a different position

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 class="zone-parent">
  <!-- the landing area for dock sections-->
  <div id="leftGradientGrid">
    <div class="measurements"></div>
    <div class="soil"></div>
    <div class="gridPattern">
    </div>
    <div class="measurements"></div>
    <div class="dropPlacement"></div>
    <div class="gridPlacement"></div>
  </div>
  <!-- this is where the pieces for the docks go, create draggable area. Snap to grid 10x10px-->
  <div class="rightBlock">
    <div class="rightBlockHeader">
      <p>Welcome to Nisswa Dock, please use our dock builder to fully realize your future project</p>
      <div class="navigation">
        <div class="regularSectionalsNav navSelect navButton" panel-id="fourByFourWithFiveByFive">
          <p> Sectionals </p>
        </div>
        <div class="floatingNav navSelect navButton" panel-id="floatingSectionals">
          <p>Floating</p>
        </div>
        <div class="rollInRampsNav navSelect navButton" panel-id="rollInsRampSectionals">
          <p> Roll-In/Ramps</p>
        </div>
        <div class="boatLiftsNav navSelect navButton" panel-id="boatLiftsSectionals">
          <p> Boat Lifts </p>
        </div>
      </div>
      <div class="instructions">
        <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 class="reset">
          <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 class="sectional_content hidden">
      <div class="fourByFourWithFiveByFive panel">
        <div class="fourByFourSectionals">
          <div class="sectionTitle fourByFourHeader">
            <p>4ft wide sections</p>
          </div>
          <div class="sectional_4x4_vertical_drag dragSection fourByFour">
            <p> 4x4 </p>
          </div>
          <div class="sectional_4x8_vertical_drag dragSection fourByFour">
            <p> 4x8 </p>
          </div>
          <div class="sectional_4x10_vertical_drag dragSection fourByFour">
            <p> 4x10 </p>
          </div>
          <div class="sectional_4x12_vertical_drag dragSection fourByFour">
            <p> 4x12 </p>
          </div>
          <div class="sectional_4x8_horizontal_drag dragSection fourByFour">
            <p> 4x8 </p>
          </div>
          <div class="sectional_4x10_horizontal_drag dragSection fourByFour">
            <p> 4x10 </p>
          </div>
          <div class="sectional_4x12_horizontal_drag dragSection fourByFour">
            <p> 4x12 </p>
          </div>
          <div class="fourByFourMiters">
            <div class="sectional_4x4_miter_upper-left_drag dragSection "></div>
            <div class="sectional_4x4_miter_upper-right_drag dragSection "></div>
            <div class="sectional_4x4_miter_lower-left_drag dragSection "></div>
            <div class="sectional_4x4_miter_lower-right_drag dragSection "></div>
          </div>
        </div>
        <!--5 by 5 Dock sections -->
        <div class="allFiveByFiveSectionals">
          <div class="sectionTitle fiveByFiveHeader">
            <p> 5ft wide sections </p>
          </div>
          <div class="fiveByFour_vertical dragSection fiveByFive">
            <p> 5x4 </p>
          </div>
          <div class="fiveByEight_vertical dragSection fiveByFive">
            <p> 5x8 </p>
          </div>
          <div class="sectional_5x10_vertical_drag dragSection fiveByFive">
            <p> 5x10 </p>
          </div>
          <div class="sectional_5x12_vertical_drag dragSection fiveByFive">
            <p> 5x12 </p>
          </div>
          <div class="sectional_5x8_horizontal_drag dragSection fiveByFive">
            <p> 5x8 </p>
          </div>
          <div class="sectional_5x10_horizontal_drag dragSection fiveByFive">
            <p> 5x10 </p>
          </div>
          <div class="sectional_5x12_horizontal_drag dragSection fiveByFive">
            <p> 5x12 </p>
          </div>
          <div class="fiveByFiveMiters">
            <div class="sectional_5x4_miter_upper-left_drag dragSection"></div>
            <div class="sectional_5x4_miter_upper-right_drag dragSection"></div>
            <div class="sectional_5x4_miter_lower-left_drag dragSection"></div>
            <div class="sectional_5x4_miter_lower-right_drag dragSection"></div>
          </div>
        </div>
      </div>
      <div class="floatingSectionals panel">
        <div class="floatingSectionalsHeader sectionTitle">
          <p> Floating Dock Sections </p>
        </div>
        <div class="floatingFiveByEightHorizontal dragSection floating">
          <p> 5x8 Floating </p>
        </div>
        <div class="floatingFiveByTenHorizontal dragSection floating">
          <p> 5x10 Floating </p>
        </div>
        <div class="floatingFiveByTwelveHorizontal dragSection floating">
          <p> 5x12 Floating </p>
        </div>
        <div class="floatingFiveBySixteenHorizontal dragSection floating">
          <p> 5x16 Floating </p>
        </div>
        <div class="floatingFiveByEightVertical dragSection floating">
          <p> 5x8 Floating </p>
        </div>
        <div class="floatingFiveByTenVertical dragSection floating">
          <p> 5x10 Floating </p>
        </div>
        <div class="floatingFiveByTwelveVertical dragSection floating">
          <p> 5x12 Floating </p>
        </div>
        <div class="floatingFiveBySixteenVertical dragSection floating">
          <p> 5x16 Floating </p>
        </div>
      </div>
      <div class="rollInsRampSectionals panel">
        <div class="rollInsRamps sectionTitle">
          <p> Roll In and Ramps </p>
        </div>
        <div class="sixteenEightyEightLeft dragSection rollInRamp">
          <p> 1688 Roll-In </p>
        </div>
        <div class="sixteenEightyEightRight dragSection rollInRamp">
          <p> 1688 Roll-In </p>
        </div>
        <div class="sixteenTenRight dragSection rollInRamp">
          <p> 16108 Roll-In </p>
        </div>
        <div class="sixteenTenLeft dragSection rollInRamp">
          <p> 16108 Roll-In </p>
        </div>
        <div class="fourByFourRamp dragSection rollInRamp">
          <p> 4x4 Ramp </p>
        </div>
        <div class="fourBySixRamp dragSection rollInRamp">
          <p> 4x6 Ramp </p>
        </div>
        <div class="fourByEightRamp dragSection rollInRamp">
          <p> 4x8 Ramp </p>
        </div>
        <div class="fourByTenRamp dragSection rollInRamp">
          <p> 4x10 Ramp </p>
        </div>
        <div class="fourBySixteenRamp dragSection rollInRamp">
          <p> 4x16 </p>
        </div>
      </div>
      <div class="boatLiftsSectionals panel">
        <div class="boatLifts sectionTitle">
          <p>Boat Lifts</p>
        </div>
        <div class="pwcVertical dragSection boatLift">
          <p> PWC </p>
        </div>
        <div class="pwcHorizontal dragSection boatLift">
          <p> PWC </p>
        </div>
        <div class="elevenTwentyFour dragSection boatLift">
          <p> 11x24</p>
        </div>
        <div class="elevenTwentySix dragSection boatLift">
          <p> 11x26</p>
        </div>
        <div class="elevenTwentyEight dragSection boatLift">
          <p> 11x28</p>
        </div>
        <div class="elevenThirty dragSection boatLift">
          <p> 11x30</p>
        </div>
        <div class="twelveTwentyFour dragSection boatLift">
          <p> 12x24</p>
        </div>
        <div class="twelveTwentySix dragSection boatLift">
          <p> 12x26</p>
        </div>
        <div class="twelveTwentyEight dragSection boatLift">
          <p> 12x28</p>
        </div>
        <div class="twelveThirty dragSection boatLift">
          <p> 12x30</p>
        </div>
      </div>
    </div>
  </div>
</div>

Solution

  • 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 class="zone-parent">
  <!-- the landing area for dock sections-->
  <div id="leftGradientGrid">
    <div class="measurements"></div>
    <div class="soil"></div>
    <div class="gridPattern"></div>
    <div class="measurements"></div>
    <div class="dropPlacement"></div>
    <div class="gridPlacement"></div>
  </div>
  <!-- this is where the pieces for the docks go, create draggable area. Snap to grid 10x10px-->
  <div class="rightBlock">
    <div class="rightBlockHeader">
      <p>Welcome to Nisswa Dock, please use our dock builder to fully realize your future project</p>
      <div class="navigation">
        <div class="regularSectionalsNav navSelect navButton" panel-id="fourByFourWithFiveByFive">
          <p> Sectionals </p>
        </div>
        <div class="floatingNav navSelect navButton" panel-id="floatingSectionals">
          <p>Floating</p>
        </div>
        <div class="rollInRampsNav navSelect navButton" panel-id="rollInsRampSectionals">
          <p> Roll-In/Ramps</p>
        </div>
        <div class="boatLiftsNav navSelect navButton" panel-id="boatLiftsSectionals">
          <p> Boat Lifts </p>
        </div>
      </div>
      <div class="instructions">
        <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 class="reset">
          <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 class="sectional_content hidden">
      <div class="fourByFourWithFiveByFive panel">
        <div class="fourByFourSectionals">
          <div class="sectionTitle fourByFourHeader">
            <p>4ft wide sections</p>
          </div>
          <div class="sectional_4x4_vertical_drag dragSection fourByFour">
            <p> 4x4 </p>
          </div>
          <div class="sectional_4x8_vertical_drag dragSection fourByFour">
            <p> 4x8 </p>
          </div>
          <div class="sectional_4x10_vertical_drag dragSection fourByFour">
            <p> 4x10 </p>
          </div>
          <div class="sectional_4x12_vertical_drag dragSection fourByFour">
            <p> 4x12 </p>
          </div>
          <div class="sectional_4x8_horizontal_drag dragSection fourByFour">
            <p> 4x8 </p>
          </div>
          <div class="sectional_4x10_horizontal_drag dragSection fourByFour">
            <p> 4x10 </p>
          </div>
          <div class="sectional_4x12_horizontal_drag dragSection fourByFour">
            <p> 4x12 </p>
          </div>
          <div class="fourByFourMiters">
            <div class="sectional_4x4_miter_upper-left_drag dragSection "></div>
            <div class="sectional_4x4_miter_upper-right_drag dragSection "></div>
            <div class="sectional_4x4_miter_lower-left_drag dragSection "></div>
            <div class="sectional_4x4_miter_lower-right_drag dragSection "></div>
          </div>
        </div>
        <!--5 by 5 Dock sections -->
        <div class="allFiveByFiveSectionals">
          <div class="sectionTitle fiveByFiveHeader">
            <p> 5ft wide sections </p>
          </div>
          <div class="fiveByFour_vertical dragSection fiveByFive">
            <p> 5x4 </p>
          </div>
          <div class="fiveByEight_vertical dragSection fiveByFive">
            <p> 5x8 </p>
          </div>
          <div class="sectional_5x10_vertical_drag dragSection fiveByFive">
            <p> 5x10 </p>
          </div>
          <div class="sectional_5x12_vertical_drag dragSection fiveByFive">
            <p> 5x12 </p>
          </div>
          <div class="sectional_5x8_horizontal_drag dragSection fiveByFive">
            <p> 5x8 </p>
          </div>
          <div class="sectional_5x10_horizontal_drag dragSection fiveByFive">
            <p> 5x10 </p>
          </div>
          <div class="sectional_5x12_horizontal_drag dragSection fiveByFive">
            <p> 5x12 </p>
          </div>
          <div class="fiveByFiveMiters">
            <div class="sectional_5x4_miter_upper-left_drag dragSection"></div>
            <div class="sectional_5x4_miter_upper-right_drag dragSection"></div>
            <div class="sectional_5x4_miter_lower-left_drag dragSection"></div>
            <div class="sectional_5x4_miter_lower-right_drag dragSection"></div>
          </div>
        </div>
      </div>
      <div class="floatingSectionals panel">
        <div class="floatingSectionalsHeader sectionTitle">
          <p> Floating Dock Sections </p>
        </div>
        <div class="floatingFiveByEightHorizontal dragSection floating">
          <p> 5x8 Floating </p>
        </div>
        <div class="floatingFiveByTenHorizontal dragSection floating">
          <p> 5x10 Floating </p>
        </div>
        <div class="floatingFiveByTwelveHorizontal dragSection floating">
          <p> 5x12 Floating </p>
        </div>
        <div class="floatingFiveBySixteenHorizontal dragSection floating">
          <p> 5x16 Floating </p>
        </div>
        <div class="floatingFiveByEightVertical dragSection floating">
          <p> 5x8 Floating </p>
        </div>
        <div class="floatingFiveByTenVertical dragSection floating">
          <p> 5x10 Floating </p>
        </div>
        <div class="floatingFiveByTwelveVertical dragSection floating">
          <p> 5x12 Floating </p>
        </div>
        <div class="floatingFiveBySixteenVertical dragSection floating">
          <p> 5x16 Floating </p>
        </div>
      </div>
      <div class="rollInsRampSectionals panel">
        <div class="rollInsRamps sectionTitle">
          <p> Roll In and Ramps </p>
        </div>
        <div class="sixteenEightyEightLeft dragSection rollInRamp">
          <p> 1688 Roll-In </p>
        </div>
        <div class="sixteenEightyEightRight dragSection rollInRamp">
          <p> 1688 Roll-In </p>
        </div>
        <div class="sixteenTenRight dragSection rollInRamp">
          <p> 16108 Roll-In </p>
        </div>
        <div class="sixteenTenLeft dragSection rollInRamp">
          <p> 16108 Roll-In </p>
        </div>
        <div class="fourByFourRamp dragSection rollInRamp">
          <p> 4x4 Ramp </p>
        </div>
        <div class="fourBySixRamp dragSection rollInRamp">
          <p> 4x6 Ramp </p>
        </div>
        <div class="fourByEightRamp dragSection rollInRamp">
          <p> 4x8 Ramp </p>
        </div>
        <div class="fourByTenRamp dragSection rollInRamp">
          <p> 4x10 Ramp </p>
        </div>
        <div class="fourBySixteenRamp dragSection rollInRamp">
          <p> 4x16 </p>
        </div>
      </div>
      <div class="boatLiftsSectionals panel">
        <div class="boatLifts sectionTitle">
          <p>Boat Lifts</p>
        </div>
        <div class="pwcVertical dragSection boatLift">
          <p> PWC </p>
        </div>
        <div class="pwcHorizontal dragSection boatLift">
          <p> PWC </p>
        </div>
        <div class="elevenTwentyFour dragSection boatLift">
          <p> 11x24</p>
        </div>
        <div class="elevenTwentySix dragSection boatLift">
          <p> 11x26</p>
        </div>
        <div class="elevenTwentyEight dragSection boatLift">
          <p> 11x28</p>
        </div>
        <div class="elevenThirty dragSection boatLift">
          <p> 11x30</p>
        </div>
        <div class="twelveTwentyFour dragSection boatLift">
          <p> 12x24</p>
        </div>
        <div class="twelveTwentySix dragSection boatLift">
          <p> 12x26</p>
        </div>
        <div class="twelveTwentyEight dragSection boatLift">
          <p> 12x28</p>
        </div>
        <div class="twelveThirty dragSection boatLift">
          <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.