appendto 掉落的物品移動到不同的地方后 position

Question

有問題的網站頁面：

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

我有一個項目，用戶可以在其中將碼頭的一部分拖到湖岸以創建自己的碼頭。 這是一個 wordpress 頁面的內部，我在移動停靠部分后遇到問題。 當我拖動該部分時，它會跳轉到另一個 position，我不明白為什么。 當我在追加后向該部分添加可拖動時，是否還需要在那里添加 position 信息？ 如果是這樣怎么辦？ 這可能是來自 Wordpress 的沖突嗎？ 感謝您的幫助。

片段中的跳躍（移動位置）問題沒有 WordPress 頁面中的問題嚴重。

編輯：我知道這是一個令人發指的設計。 我正在使用花哨的 colors，所以我可以看到 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>

最初，調整后的position正在被刪除。 我的建議是之前將其刪除，然后應用您自己的樣式將其放置在您想要的位置。 抱歉，如果不清楚。

由於可拖動對象已經吸附，我們只需要確保它附加了正確的 position。您的偏移量按預期工作，但僅在第一次放置時有效。 未來的拖放應該不需要這個。