appendto 掉落的项目移动到不同的位置后

Question

有问题的网页：

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

我有一个项目，用户可以将码头的一部分拖到湖岸以创建自己的码头。这是在 wordpress 页面内，我在移动停靠部分后遇到问题。当我拖动该部分时，它会跳到另一个位置，我不知道为什么。当我在追加后向该部分添加可拖动时，是否还需要在那里添加位置信息？如果是这样怎么办？这可能是来自 Wordpress 的冲突吗？感谢您的帮助。

片段中的跳跃（移动位置）问题没有 WordPress 页面中的那么严重。

编辑：我知道这是一个令人发指的设计。我正在使用花哨的颜色，所以我可以看到 DIV 填充、间距等的结果。我将追求功能然后是美观。

$(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>

Answer 1

考虑以下示例。

$(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>

最初调整后的位置正在被删除。我的建议是之前将其删除，然后应用您自己的样式将其放置在您想要的位置。抱歉，如果不清楚。

由于 draggable 已经捕捉，我们只需要确保它被附加到正确的位置。您的偏移量按预期工作，但仅限于第一次下降。未来的拖放应该不需要这个。

appendto 掉落的项目移动到不同的位置后

After appendto dropped item moves to a different position

javascript

jquery

jquery-ui-draggable

jquery-ui-droppable