перетаскиваемые div теряют свое свойство «float left» после того, как их уронили - PullRequest
Новая
       1

перетаскиваемые div теряют свое свойство «float left» после того, как их уронили

0 голосов
/ 24 сентября 2018

У меня есть пример jquery, в котором перетаскиваемые элементы div «плавают влево» в начальной позиции (= обновите Google Chrome).Когда я перетаскиваю их в любой сбрасываемый элемент div, «плавающий влево» исчезает навсегда.

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

Как я могу решить эту проблему? 

$(function() {
        $(".ui-widget-content").draggable({
            revertDuration : 100,
            revert : function(event, ui) {
                $(this).data("uiDraggable").originalPosition = {
                    top : 0,
                    left : 0
                };
                return !event;
            }
        });
        $("#droppable").droppable({
            drop: function(ev, ui) {
                $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this);
            }
        });
        $("#parent").droppable({
            drop: function(ev, ui) {
                $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this);
            }
        });
    });

    <style>
        div .floatleft {
            float:left;
        }
        .clearBoth { 
            clear:both; 
        }

    </style>
    </head>

    <!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
  rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"> 
   </script>

   </head>

   <body>
   <div id="parent" class="ui-widget ui-state-default">
        <p>droppable foat left (start position)</p>
       <div id="origin" class="floatleft">
           <div id="draggable" class="ui-widget-content">
               <p>draggable 1</p>
           </div>
       </div>
       <div id="origin2" class="floatleft">
               <div id="draggable2" class="ui-widget-content">
                   <p>draggable 2</p>
               </div>
           </div>
       </div>
   </div>

   <br class="clearBoth" />

   <div id="droppable" class="ui-widget-header">
        <p>other droppable</p>
   </div>

   </body>
</html>

Ответы [ 3 ]

0 голосов
/ 24 сентября 2018

Все ваши предложения полезны.Спасибо

Мне кажется, это лучшее решение: 

<style>
    div.floatleft ,.ui-widget-content {
        float:left;
    }
    .clearBoth { 
        clear:both; 
    }
</style>        
   <div id="parent" class="ui-widget ui-state-default floatleft">
        <p>droppable foat left (start position)</p>
        <div id="draggable" class="ui-widget-content">
            <p>draggable 1</p>
        </div>
        <div id="draggable2" class="ui-widget-content">
            <p>draggable 2</p>
        </div>
   </div>


<br class="clearBoth" />

<div id="droppable" class="ui-widget-header floatleft">
    <p>other droppable</p>
</div>
0 голосов
/ 24 сентября 2018

Пытался навести порядок в вашем примере: 

$(function() {
  $(".ui-widget-content").draggable({
    revertDuration: 100,
    revert: function(event, ui) {
      $(this).data("uiDraggable").originalPosition = {
        top: 0,
        left: 0
      };
      return !event;
    }
  });
  $("#droppable").droppable({
    drop: function(ev, ui) {
      $(ui.draggable).detach().css({
        top: 0,
        left: 0
      }).appendTo(this);
    }
  });
  $("#parent").droppable({
    drop: function(ev, ui) {
      $(ui.draggable).detach().css({
        top: 0,
        left: 0
      }).appendTo(this);
    }
  });
});
.floatleft {
  float: left;
}

.clearBoth {
  clear: both;
}
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>

<div id="parent" class="ui-widget ui-state-default">
  <p>droppable float left (start position)</p>
  <div id="origin-1" class="floatleft">
    <div id="draggable" class="ui-widget-content">
      <p>draggable 1</p>
    </div>
  </div>
  <div id="origin-2" class="floatleft">
    <div id="draggable2" class="ui-widget-content">
      <p>draggable 2</p>
    </div>
  </div>
</div>

<br class="clearBoth" />

<div id="droppable" class="ui-widget-header">
  <p>other droppable</p>
</div>

Это позволяет чистое перетаскивание.В вашем Droppable есть проблема.По сути, вы назначаете одинаковые top и left для всего, что отбрасывается.Это заставит все предметы приземляться друг на друга, независимо от их статуса.

Это не ясно, но я думаю, что когда предмет опускается до #droppable, вы хотите, чтобы он был блоком, но когдавы возвращаете его обратно к #parent, вы хотите, чтобы он был встроенным блоком (чтобы он не был большим блоком).

Что-то, что нужно помнить с помощью Draggables, они используют стили элементов для управления положением, и это часто будетперегрузить свой CSS.Удобный трюк - $(ui.droppable).attr("style", "");, который очистит любой стиль, добавленный виджетом.

Так что я думаю, что исправление - это исправление вашего #parent сбрасываемого.Я бы предложил что-то вроде: 

$("#parent").droppable({
  drop: function(ev, ui) {
    $(ui.draggable)
      .attr("style", "")
      .detach()
      .appendTo(this);
  }
});

Это не возвращает элемент обратно в один из origin элементов.Он добавляет его к #parent.Опять же, ваш пост не ясно, что вы хотите, чтобы здесь произошло.Таким образом, это добавляет элемент назад, он все еще плавает влево, но он также пытается заблокировать. 

$(function() {
  $(".ui-widget-content").draggable({
    revertDuration: 100,
    revert: function(event, ui) {
      $(this).data("uiDraggable").originalPosition = {
        top: 0,
        left: 0
      };
      return !event;
    }
  });
  $("#droppable").droppable({
    drop: function(ev, ui) {
      $(ui.draggable).detach().css({
        top: 0,
        left: 0
      }).appendTo(this);
    }
  });
  $("#parent").droppable({
    drop: function(ev, ui) {
      $(ui.draggable)
        .attr("style", "")
        .detach()
        .appendTo(this);
    }
  });
});
.floatleft {
  float: left;
}

.clearBoth {
  clear: both;
}
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>

<div id="parent" class="ui-widget ui-state-default">
  <p>droppable float left (start position)</p>
  <div id="origin-1" class="floatleft">
    <div id="draggable" class="ui-widget-content">
      <p>draggable 1</p>
    </div>
  </div>
  <div id="origin-2" class="floatleft">
    <div id="draggable2" class="ui-widget-content">
      <p>draggable 2</p>
    </div>
  </div>
</div>

<br class="clearBoth" />

<div id="droppable" class="ui-widget-header">
  <p>other droppable</p>
</div>

Не стесняйтесь редактировать свой пост или комментарий с некоторыми разъяснениями.Надеюсь, это поможет.

0 голосов
/ 24 сентября 2018

Дело в том, что вы перетаскиваете р-тег и оставляете <div id="origin" class=floatleft></div> над.Когда вы вытягиваете его обратно, вы не тянете его внутрь этих элементов, и поэтому они не применяют float: left css.

Я бы предложил изменить CSS: 

#parent p{
  float:left;
}

Это должно сделать это, я думаю

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...