Javascript jQueryUISortable工作得很奇怪_Javascript_Jquery_Html_Css_Jquery Ui

Javascript jQueryUISortable工作得很奇怪

javascript jquery html css jquery-ui

Javascript jQueryUISortable工作得很奇怪,javascript,jquery,html,css,jquery-ui,Javascript,Jquery,Html,Css,Jquery Ui,我正试着和你在一起我有3个div，它们一开始是不可见的，但如果单击按钮就会可见。然后需要对div进行排序它在某种程度上起作用，但当我将一个Div拖到另一个Div上时，它并没有为它“腾出位置”。因此，下方的Div必须移开，并为新Div留下一个“间隙”。奇怪的是，只有当我删除CSS（定义CSS的地方）时，这些div一开始是不可见的，它才会起作用这就是我所拥有的： <style> .myClass { display: none; } </style> <

我正试着和你在一起

我有3个div，它们一开始是不可见的，但如果单击按钮就会可见。然后需要对div进行排序

它在某种程度上起作用，但当我将一个Div拖到另一个Div上时，它并没有为它“腾出位置”。因此，下方的Div必须移开，并为新Div留下一个“间隙”。
奇怪的是，只有当我删除CSS（定义CSS的地方）时，这些div一开始是不可见的，它才会起作用

这就是我所拥有的：

<style>
.myClass {
    display: none;
}
</style>
<script>
$(document).ready(function(){
    $('.content2').append("<div class='myClass' id='ro_1'>Div 1<div>");
    $('.content2').append("<div class='myClass' id='ro_2'>Div 2<div>");
    $('.content2').append("<div class='myClass' id='ro_3'>Div 3<div>");

    $( "button" ).click(function() {
        makeVisible();
    });

    $(function() {
        $( ".content2" ).sortable({
            connectWith: ".content2"
        }).disableSelection();
    });

    function makeVisible(){
        $('.myClass').css('display', 'block');
    }
});
</script>
<div class="content1"></div>
<div class="content2"></div>
<button>Visible</button>


.myClass{
显示：无；
}
$（文档）.ready（函数（）{
$（'.content2'）。追加（“Div 1”）；
$（'.content2'）。追加（“Div 2”）；
$（'.content2'）。追加（“Div 3”）；
$（“按钮”）。单击（函数（）{
使可见（）；
});
$（函数（）{
$（“.content2”）.可排序({
连接到：“.content2”
}).disableSelection（）；
});
函数makeVisible（）{
$（'.myClass'）.css（'display'，'block'）；
}
});
看得见的

小提琴：

这是预期的行为（已删除CSS）：

编辑：

我用Chrome和Firefox检查了它，因为在函数makeVisible中设置了display:inline block

解决方案如下：

function makeVisible(){
      $('.myClass').css('display', 'block');
  }

发生这种情况是因为在函数makeVisible中设置了display:inline block

解决方案如下：

function makeVisible(){
      $('.myClass').css('display', 'block');
  }

对我来说，工作中没有不良行为

我以你为例，提出了自己的观点

添加了你删除的css，添加了你忘记的按钮

按钮
.myClass{
显示：无；
}

可以是浏览器吗

根据您的需要，还要注意“内联块”或“块”。

对于我来说，这是一种没有不良行为的工作方式

我以你为例，提出了自己的观点

添加了你删除的css，添加了你忘记的按钮

按钮
.myClass{
显示：无；
}

可以是浏览器吗

根据您的需要，还要注意“内联块”或“块”。

我做了以下工作：

function makeVisible(){
      $('.myClass').css('display', 'block');
  }

添加了一个附加包装，以帮助分别管理可见和可排序的按钮。然后还添加了一点额外的CSS，以使div并排出现，如您的示例中所示

HTML:

 <div class="content1"></div>

 <div class="content2">
    <div class="target"></div>
 </div>

<button>Visible</button>

 $(document).ready(function(){
   $('.content2 .target').append("<div class='myClass' id='ro_1'>Div 1<div>");
   $('.content2 .target').append("<div class='myClass' id='ro_2'>Div 2<div>");
   $('.content2 .target').append("<div class='myClass' id='ro_3'>Div 3<div>");

   $( "button" ).click(function() {
     makeVisible();
   });

   $(function() {
     $( ".target" ).sortable({
        connectWith: ".target"
     }).disableSelection();
   });

   function makeVisible(){
    $('.content2').css('display', 'inline-block');
   }
});

div.myClass {
  float:left;
}

我做了以下工作：

function makeVisible(){
      $('.myClass').css('display', 'block');
  }

添加了一个附加包装，以帮助分别管理可见和可排序的按钮。然后还添加了一点额外的CSS，以使div并排出现，如您的示例中所示

HTML:

 <div class="content1"></div>

 <div class="content2">
    <div class="target"></div>
 </div>

<button>Visible</button>

 $(document).ready(function(){
   $('.content2 .target').append("<div class='myClass' id='ro_1'>Div 1<div>");
   $('.content2 .target').append("<div class='myClass' id='ro_2'>Div 2<div>");
   $('.content2 .target').append("<div class='myClass' id='ro_3'>Div 3<div>");

   $( "button" ).click(function() {
     makeVisible();
   });

   $(function() {
     $( ".target" ).sortable({
        connectWith: ".target"
     }).disableSelection();
   });

   function makeVisible(){
    $('.content2').css('display', 'inline-block');
   }
});

div.myClass {
  float:left;
}

这是因为您使用的是

display:none

而不是

visibility:hidden。因为显示属性会删除空间
.myClass {
    visibility:hidden;
}

function makeVisible(){
        $('.myClass').css('visibility', 'visible');
    }


另一种解决方案是：
 <div class="content1"></div>

 <div class="content2">
    <div class="target"></div>
 </div>

<button>Visible</button>

 $(document).ready(function(){
   $('.content2 .target').append("<div class='myClass' id='ro_1'>Div 1<div>");
   $('.content2 .target').append("<div class='myClass' id='ro_2'>Div 2<div>");
   $('.content2 .target').append("<div class='myClass' id='ro_3'>Div 3<div>");

   $( "button" ).click(function() {
     makeVisible();
   });

   $(function() {
     $( ".target" ).sortable({
        connectWith: ".target"
     }).disableSelection();
   });

   function makeVisible(){
    $('.content2').css('display', 'inline-block');
   }
});

div.myClass {
  float:left;
}

单击按钮时使用JQuery删除类

$（文档）.ready（函数（）{
$（'.content2'）。追加（“Div 1”）；
$（'.content2'）。追加（“Div 2”）；
$（'.content2'）。追加（“Div 3”）；
$（“按钮”）。单击（函数（）{
使可见（）；
});
$（函数（）{
$（“.content2”）.可排序({
连接到：“.content2”
}).disableSelection（）；
});
函数makeVisible（）{
$（'.content2'）.find（'*'）.removeClass（“myClass”）；
}
});
.myClass{
显示：无；
}

可见
这是因为您使用的是显示：无
而不是可见：隐藏。因为显示属性会删除空间
.myClass {
    visibility:hidden;
}

function makeVisible(){
        $('.myClass').css('visibility', 'visible');
    }


另一种解决方案是：
 <div class="content1"></div>

 <div class="content2">
    <div class="target"></div>
 </div>

<button>Visible</button>

 $(document).ready(function(){
   $('.content2 .target').append("<div class='myClass' id='ro_1'>Div 1<div>");
   $('.content2 .target').append("<div class='myClass' id='ro_2'>Div 2<div>");
   $('.content2 .target').append("<div class='myClass' id='ro_3'>Div 3<div>");

   $( "button" ).click(function() {
     makeVisible();
   });

   $(function() {
     $( ".target" ).sortable({
        connectWith: ".target"
     }).disableSelection();
   });

   function makeVisible(){
    $('.content2').css('display', 'inline-block');
   }
});

div.myClass {
  float:left;
}

单击按钮时使用JQuery删除类

$（文档）.ready（函数（）{
$（'.content2'）。追加（“Div 1”）；
$（'.content2'）。追加（“Div 2”）；
$（'.content2'）。追加（“Div 3”）；
$（“按钮”）。单击（函数（）{
使可见（）；
});
$（函数（）{
$（“.content2”）.可排序({
连接到：“.content2”
}).disableSelection（）；
});
函数makeVisible（）{
$（'.content2'）.find（'*'）.removeClass（“myClass”）；
}
});
.myClass{
显示：无；
}

可见
问题在于，占位符还将包含类myClass
，因此根据您现有的CSS，占位符将不可见。您可以通过更新选择器以排除可排序辅助对象来解决此问题：
.myClass:not(.ui-sortable-placeholder) {
  display: none;
}
.ui-sortable-placeholder{
  visibility:visible !important;
  border:1px solid black; /*for demo*/
}

默认情况下，jqueryui将助手可见性设置为visibility:hidden
，使其看起来像一个空白。如果你真的想看到它，你也应该覆盖它
问题是，占位符还将包含类myClass
，因此根据现有CSS，占位符将不可见。您可以通过更新选择器以排除可排序辅助对象来解决此问题：
.myClass:not(.ui-sortable-placeholder) {
  display: none;
}
.ui-sortable-placeholder{
  visibility:visible !important;
  border:1px solid black; /*for demo*/
}

默认情况下，jqueryui将助手可见性设置为visibility:hidden
，使其看起来像一个空白。如果你真的想看到它，你也应该覆盖它
选中此选项

看得见的
$（文档）.ready（函数（）{
$（'.content2'）.append（'1'）；
$（'.content2'）.append（'2'）；
$（'.content2'）.append（'3'）；
$（“按钮”）。单击（函数（）{
使可见（）；
});
$（函数（）{
$（'.content2'）。可排序({
包含：'父'，
轴：“x”
});
});
函数makeVisible（）{
$（'.myClass'）.css（'display'，'block'）；
}
});
.内容2{
显示：内联块；
高度：45px；
填充物：2px 1px；
边框：2倍实心#aaf；
字号：0；
}
.标签{
显示：内联块；
垂直对齐：顶部；
高度：41px；
边框：2个实心#faa；
利润率：0.1px；
字号：14pt；
文本对齐：居中；
}
#tab1、#tab5、#tab2、#tab4、#tab3{宽度：35px；}
h3{
页边距底部：0；
}

选中此选项

看得见的
$（文档）.ready（函数（）{
$（'.content2'）.append（'1'）；
$（'.content2'）.append（'2'）；
$（'.content2'）.append（'3'）；
$（“按钮”）。单击（函数（）{
使可见（）；
});
$（函数（）{
$（'.content2'）。可排序({
遏制：