ปัญหาออฟเซ็ตการลากและวาง Jquery + Css

อัปเดต: ฉันได้อัปเดต jsfiddle เพื่อให้ชัดเจนยิ่งขึ้น เพื่อชี้แจงประเด็นนี้ เมื่อลากไทล์จากแถวล่างและวางลงในแถวบนสุด จะทำให้ div ที่ดร็อปได้ชดเชยลงจาก div อื่นๆ เมื่อเติมทั้งสาม div แล้ว div ก็จะอยู่ในบรรทัดอีกครั้ง อะไรเป็นสาเหตุของการชดเชยของ div เมื่อเติม div หนึ่งหรือสองตัวเท่านั้น

ฉันกำลังเรียนรู้ jquery ลากและวางตอนนี้

ปัญหาคือเมื่อฉันวางลงใน div มันจะสร้าง offset ใน droppable divs

คุณสามารถดูปัญหาได้ใน jsfiddle ที่ฉันสร้างขึ้น ตามลิงค์ด้านล่าง ฉันเป็นมือใหม่ที่ jquery และลากและวาง ดังนั้นโปรดจำไว้เสมอว่าโค้ดของฉันถูกฆ่า

jsfiddle


drag-and-drop jquery css jquery-ui-draggable
person Brent    schedule 27.03.2018    source แหล่งที่มา
comment
กรุณาอธิบายเกี่ยวกับปัญหาของคุณอย่างชัดเจน คุณมี $( ".trash" ).droppable and $( ".GridDiv" ).droppable สองอัน และฉันไม่เห็นปัญหาของคุณ   -  person Ali Soltani    schedule 28.03.2018
comment
ขอบคุณที่ดูโพสต์และ jsfiddle ฉันได้ล้าง jsfiddle แล้วและเพิ่มการอัปเดตเพื่อชี้แจงคำถาม/ปัญหา   -  person Brent    schedule 29.03.2018

คำตอบ (1)


arrow_upward
1
arrow_downward

คุณสามารถแก้ไขได้ดังนี้:

.componentHolder {
  width: 100px;
  height: 120px;
  border: 1px solid black;
  padding: 0px;
  margin: 0px;
  float: left; // I used float instead of inline-block
}

การสาธิตออนไลน์ (jsFiddle)

person Ali Soltani    schedule 29.03.2018
comment
ขอบคุณมาก! นั่นคือสิ่งที่จำเป็นจริงๆ - person Brent; 29.03.2018
comment
@เบรนท์ ยินดีต้อนรับครับ โปรดโหวตคำตอบของฉันสำหรับการรู้จักคนอื่นว่ามันช่วยคุณได้เพราะบางคนเห็นเฉพาะคำตอบที่โหวตขึ้นเท่านั้น - person Ali Soltani; 29.03.2018