追加を使用したjQueryの配置要素

1つのコンテナを別のコンテナにドラッグしているとき、その要素を別のコンテナ内に追加します。機能はちょうどそれを行うが、私は要素を追加するときに私はそれをドロップしようとしているコンテナからオフセットされている理由を解読していないようだ。それは何が起こっているのか。以下に描かれていることは起こっていることです。この追加を使用したjQueryの配置要素

へ

私は箱は私がに追加しています新しいボックスの境界になりたいです。

コード

HTML

<!DOCTYPE html> 
<html > 
<head> 
    <meta charset="UTF-8"> 
    <title>grid-cell playground</title> 

    <link rel="stylesheet" type="text/css" href="css/style.css" /> 


</head> 

<body> 
    <script type="text/javascript" 
    src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript" 
    src="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script> 
    <link rel="stylesheet" type="text/css" 
    href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/> 

    <div class="grid drag-menu"> 



     <div class="grid-cell "> 
      <div class="plus-icon"></div> 
     </div> 

     <div class="grid-cell "> 
      <div class="plus-icon"></div> 
     </div> 

     <div class="grid-cell "> 
      <div class="plus-icon"></div> 
     </div> 

     <div class="grid-cell "> 
      <div class="plus-icon"></div> 
     </div> 

     <div class="grid-cell "> 
      <div class="plus-icon"></div> 
     </div> 

     <div class="grid-cell "> 
      <div class="plus-icon"></div> 
     </div> 

     <div class="grid-cell "> 
      <div class="plus-icon"></div> 
     </div> 

     <div class="grid-cell "> 
      <div class="plus-icon"></div> 
     </div> 

     <div class="grid-cell "> 
      <div class="plus-icon"></div> 
     </div> 

     <div class="grid-cell "> 
      <div class="plus-icon"></div> 
     </div> 


    </div> 

    <script src="js/index.js"></script> 

</body> 
</html>

Javascriptを

var i = 0; 
var yourCurrentlyHoveredElement; 
var containerPLus = false; 


$('.grid-cell') 
    .attr("id", 'originalParents') 
    .draggable({ containment: ".grid-containment :hover", scroll: false }) 
     .resizable() 
     .droppable({ 
      over: function (event, ui) { 
       yourCurrentlyHoveredElement = $(this); //the 'this' under over event 
      }, 
      drop: function (event, ui) { 
      var target = ui.draggable; 
      console.log(target); 
      if (yourCurrentlyHoveredElement.attr("id") === "originalParents") { 
       yourCurrentlyHoveredElement.append(target); 
      } 
     } 
}); 

$(".plus-icon").click(function() { 
    $(this).parent(".grid-cell").append("<div class='grid-cell' onmouseover='call_mouseover()'><p class='number' id = '\" + i + \"'>" + i + "</p>" + "</div>"); 
    /*1st grid-cell created*/ 

    $(this).parent(".grid-cell").addClass("grid"); 

    $('.grid-cell') 
     .draggable({containment: ".grid-containment", scroll: false}) 
     .resizable(); 

    i++; 

    $('.number') 
     .draggable({containment: ".grid-cell", scroll: false}); 
}); 

function call_mouseover() { 

}

CSS

body { 
    font: 100 1em/150% "proxima-nova", Helvetica, sans-serif; 
    margin: 0; 
    position:relative; 
} 

.cm-container { 
    margin: 0 35px; 
    border: 3px solid #03A9F4; 
} 

.grid { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    align-items: baseline; 
} 

.grid-column { 
    flex-direction: column; 
    display: flex; 
    flex-wrap: wrap; 

} 

.grid-center { 
    justify-content: center; 
    align-items: center; 
} 

.grid-align-center { 
    align-items: center; 
} 

.grid-right { 
    justify-content: flex-end; 
    align-items: center; 
} 

.grid-column-right { 
    justify-content: center; 
    align-items: flex-end; 
} 


.grid-space-around { 
    justify-content: space-around; 
} 

.grid-space-between { 
    justify-content: space-between; 
} 

.grid-cell { 
    padding: 4em 4em 4em; 
    background: rgba(51, 153, 204, .2); 
    transition: background-color 0.3s ease; 
    border: 1px solid #33cccc; 
    border-radius: 3px; 
    position: relative; 
    cursor: crosshair; 
} 

.grid-cell:hover { 
    background: rgba(255, 152, 0, 0.29); 
} 

.self-end { 
    align-self: flex-end; 
} 

.self-start { 
    align-self: flex-start; 
} 

.self-center { 
    align-self: center; 
} 

.self-stretch { 
    align-self: stretch; 
} 

/* flex sizes */ 

.flex-1 { 
    flex: 1; 
} 


/* text centering*/ 

.text-center { 
    text-align: center; 
} 


/* other styles */ 

.title { 
    color: #000; 
    font-size: 11px; 
    position: absolute; 
    top: -14px; 
    right: 4px; 
} 

.plus-icon { 
    background-image: url("https://cdn0.iconfinder.com/data/icons/math-business-icon-set/93/1_1-512.png"); 
    background-size: cover; 
    height:14px; 
    width:14px; 
    position: absolute; 
    right: 2.5px; 
    top: 2.5px; 
    cursor:pointer; 
    opacity:0.1; 
    transition: all 0.5s; 
} 

.plus-icon:hover { 
    transition: all 0.5s; 
    opacity:1; 
} 

.m-paragraph { 
    max-width: 250px; 
} 



.margin-right { 
    margin-right: auto; 
} 

.margin-left { 
    margin-left: auto; 
} 

.margin-top { 
    margin-top: auto; 
} 

/* single-page build settings */ 

.main-grid-cell { 
    height: 93.5vh; 
    margin-top: 1px; 
} 

.logo { 
    padding: 0; 
} 

#logoSVG { 
    width: 115px; 
    height:50px; 
} 

.st1 { 
    fill: #FFFFFF; 
    stroke: #fff; 
    stroke-width: 4; 
} 

svg:hover { 
    cursor: pointer; 
}

どれ説明オフセットの追加に？

編集：だからJS FIDDLEだから箱の二つは一種の大きくすると、その後ボックスのいずれかにプラス記号を使用し

https://jsfiddle.net/ecnfk54h/5/

で取り付けられています。これにより、新しいdivコンテナに数値が追加されます。番号が付けられたボックスを別のコンテナにドラッグしてドロップすると、アイテムの位置が新しいコンテナの外にオフセットされてしまいます。そのため、新しいコンテナ内の位置が正しくない原因が考えられます。

出典

2017-08-14 Suliman Sharif

作業のスニペットを投稿して、より良い説明ができる場合 –

@MarcoSalerno JSFiddleを追加しました。うまくいけば問題はより明確になります –

誰もが知りたいと思っていたが、最高の戦略ではなかった。私はターゲット内のデータを取った。それをオブジェクトからHTML要素に変換し、それに新しい要素を追加し、前の要素を削除しました。これはかなりうまくいったが、より複雑なため、それは間違いなくあなたがそれを見つけることができますjavascriptのコードで問題

var target = ui.draggable.html(); 
      if (yourCurrentlyHoveredElement.attr("id") === "originalParents") { 
       yourCurrentlyHoveredElement.append("<div class ='.grid-cell' onmouseover='call_mouseover()'><div class='remove'>&times</div>" + target + "</div>"); 
      }

に実行されます。

出典

2017-08-15 02:55:01

追加を使用したjQueryの配置要素

答えて

関連する問題