jquery css как сохранить позицию, если вы удаляете поле

Question

Я ткнул и не мог найти этот вопрос в частности, если я пропустил его, пожалуйста, любезно укажите мне в правильном направлении.

Цель: Я нахожусь в процессе создания системы статистической отчетности для нашего сайта. Когда вы впервые получаете доступ к нему, у него есть тип диаграммы панели управления с общей статистикой и графики, чтобы идти вместе с ним. Я хотел сделать так, чтобы каждый отдельный набор статистики/графиков можно было перемещать по странице, как вы считаете нужным, хотя она первоначально начинается в центре, если вы не переместите ее. Для этого я использую jQuery и пользовательский интерфейс jQuery.

Проблема: Для начального вида я использую margin: 0 auto, чтобы центрировать divs на странице. Первая проблема, с которой я столкнулся, - это когда вы перетаскиваете ее, вы не можете перетащить ее влево из-за установленного на ней поля. Я использовал свойство события draggablestart:, чтобы удалить margin недвижимость от div. Это фиксировало проблему, когда вы не могли ее перемещать так, как вы ожидали, но когда вы начинаете ее перетаскивать, удаление поля заставляет div прыгать в левую часть экрана, и вам нужно снова щелкнуть по нему ,

Есть ли способ предотвратить «прыжок» и заставить div сохранить текущее положение при удалении свойства поля? Неужели я все это неправильно делаю? Любая помощь приветствуется, даже если вы просто скажите мне, чтобы я не делал этого таким образом и не фигурировал что-то другое самостоятельно.

Заранее благодарен!

JQuery:

<script> 
    $(document).ready(function() { 
     $.post("getStats.php", function (data) { 
      var ctx = document.getElementById("myChart").getContext("2d"); 
      var myNewChart = new Chart(ctx).Pie(data); 

     }, 'json'); 

     var contPos = $("#statOverallCont").position(); 
     $("#statOverallCont").draggable({ 
      snap: ".snapTarget", 
      snapMode: "both", 
      containment: "body", 
      drag: function() { 
       $("#statOverallCont").css("margin", ""); 
       $("#statOverallCont").css("left", contPos.left); 
       $("#statOverallCont").css("top", contPos.top); 
      } 
     }); 
    }); 
</script> 

^Я попытался захватить свою первоначальную позицию, а затем попытаться изменить положение после того, как запас удаляется. Кажется, он ничего не делал.

ДИВ ж/Стиль:

<div id="statOverallCont" style="background-color: #dbdbdb; position: relative; display: table; margin: 0 auto; text-align: center; clear:both; padding: 10px;border: 2px solid black" > 

---

JSFIDDLE DEMO

Answer 1

Функция перетаскивания обеспечивает параметры в это обратный вызов. event и ui. ui имеет свойство ui.position, которое содержит left и top. При перетаскивании, удалите поля, сделайте положение элемента абсолютным и установите значения позиции, взятые из параметров!

выглядит следующим образом

drag: function (event,ui) { 
    $("#statOverallCont").css("position", "absolute"); 
    $("#statOverallCont").css("left", ui.position.left); 
    $("#statOverallCont").css("top", ui.position.top); 
} 

Это должно совать элемент мыши при перетаскивании.

Update:

Вам нужно будет обновить CSS, удалив поле: 0px автомобиль; а затем используя свойство left css, установите его на 50%, чтобы оно было горизонтально центрировано. Это позволит вам перетащить элемент, не заставляя его прыгать. Btw идея была захвачена Fata1Err0r Так выиграть ситуацию.: D

Answer 2

Основываясь на помощи Dimal (спасибо кстати), это, по-видимому, лучшее решение для этого, не используя margin для того, чтобы сосредоточить вещи и не использовать translate/transform, поскольку он размывает текст в Chrome.

JQuery:

//If you want to center it horizontally/vertically 
jQuery.fn.center = function() { 
    this.css("position", "absolute"); 
    this.css("top", ($(window).height()/2) - (this.outerHeight()/2)); 
    this.css("left", ($(window).width()/2) - (this.outerWidth()/2)); 
    return this; 
} 

//If you want to center it horizontally only 
jQuery.fn.centerHor = function() { 
    this.css("position", "absolute"); 
    this.css("left", ($(window).width()/2) - (this.outerWidth()/2)); 
    return this; 
} 

//If you want to center it vertically only 
jQuery.fn.centerVer = function() { 
    this.css("position", "absolute"); 
    this.css("top", ($(window).height()/2) - (this.outerHeight()/2)); 
    return this; 
} 

$(document).ready(function() { 

    // grab stats from database and create graph 
    $.post("getStats.php", function (data) { 
     var ctx = document.getElementById("myChart").getContext("2d"); 
     var myNewChart = new Chart(ctx).Pie(data); 
    }, 'json'); 

    // Center it before displaying it so there is no visual jump 
    $("#statOverallCont").centerHor().css("display", "table"); 

    $("#statOverallCont").draggable({ 
     snap: ".snapTarget", 
     snapMode: "both", 
     containment: "body" 
    }); 

}); 

CSS:

background-color: #dbdbdb; 
display: none; 
clear:both; 
padding: 10px; 
border: 2px solid black 

Я держу скрытые DIV в то время как JQuery заботится центрирования все после загрузки страницы вверх, то я сделать его видимым. Это мешает вам видеть, как это происходит слева от центра.

Использование позиции вместо поля устраняет проблему с перетаскиванием пользовательского интерфейса jQuery, заставляя div прыгать при удалении поля.

WORKING JSFIDDLE DEMO

---

После этого вопроса, я положил его вместе таким образом, чтобы можно было легко использовать его на протяжении всего вашего сайта, а также будущих сайтов. Надеюсь, это поможет кому-то еще!

center.js:

// We add a pos parameter so we can specify which position type we want 

// Center it both horizontally and vertically (dead center) 
jQuery.fn.center = function (pos) { 
    this.css("position", pos); 
    this.css("top", ($(window).height()/2) - (this.outerHeight()/2)); 
    this.css("left", ($(window).width()/2) - (this.outerWidth()/2)); 
    return this; 
} 

// Center it horizontally only 
jQuery.fn.centerHor = function (pos) { 
    this.css("position", pos); 
    this.css("left", ($(window).width()/2) - (this.outerWidth()/2)); 
    return this; 
} 

// Center it vertically only 
jQuery.fn.centerVer = function (pos) { 
    this.css("position", pos); 
    this.css("top", ($(window).height()/2) - (this.outerHeight()/2)); 
    return this; 
} 

В моих <head>:

<script src="scripts/center.js"></script> 

Примеры использования:

$("#example1").centerHor("absolute") 
$("#example2").centerHor("fixed") 

$("#example3").centerVer("absolute") 
$("#example4").centerVer("fixed") 

$("#example5").center("absolute") 
$("#example6").center("fixed") 

Он работает с любым типом позиционирования, и может быть использовано в течение весь ваш сайт легко, а также легко переносится на любой другой сайт, который вы создаете.