Question

我在单独的容器中有很少的可拖动物品。当用户开始拖动元素时，我需要删除容器的position css属性。这是我的代码：

$('#widget li').draggable({
   helper: 'clone',
   revert: 'invalid',
   start: function(){
     $('#widget').css({'position': ''});
   },
   drag: function(){
     $(this).css({'z-index':'1500'});
   }
});

它不起作用，容器样式不会改变。我怎样才能解决这个问题？这是小提琴：https://jsfiddle.net/vaxobasilidze/wh6addd6/4/

＆＃13;

$('#deviceName li').draggable({
  helper: 'clone',
  revert: 'invalid',
  start: function() {
    $('#deviceName').css({
      'position': ''
    });
  },
  drag: function() {
    $(this).css({
      'z-index': '1500'
    });
  }
});
$('#interface li').draggable({
  helper: 'clone',
  revert: 'invalid',
  start: function() {
    $('#interface').css({
      'position': ''
    });
  },
  drag: function() {
    $(this).css({
      'z-index': '1500'
    });
  }
});
$('#display li').draggable({
  helper: 'clone',
  revert: 'invalid',
  start: function() {
    $('#display').css({
      'position': ''
    });
  },
  drag: function() {
    $(this).css({
      'z-index': '1500'
    });
  }
});
$('#output li').draggable({
  helper: 'clone',
  revert: 'invalid',
  start: function() {
    $('#output').css({
      'position': ''
    });
  },
  drag: function() {
    $(this).css({
      'z-index': '1500'
    });
  }
});
$('#streams li').draggable({
  helper: 'clone',
  revert: 'invalid',
  start: function() {
    $('.draggableItems').css({
      'position': ''
    });
  },
  drag: function() {
    $(this).css({
      'z-index': '1500'
    });
  }
});

function foo() {
  $('.foo').each(function() {
    $(this).draggable({
      //containment: $(this).parent(),
      stack: '.foo'
    });
  });
}
var fooCount = $('.foo').length;
$('#mainDiv').droppable({
  drop: function(event, ui) {
    if (!ui.draggable.hasClass('foo')) {
      var Class = ui.draggable.attr("class");
      var title = ui.draggable.text().trim();
      var item = $('<table class="foo elementTable ' + Class + '" name="' + title + '" id="' + (fooCount + 1) + '"><tr class="tableHeader"><th class="thClass"><button class="settings">set</button>' + title + '<span class="close">x</span></th></tr><tr><td class="add"><span class="addList">Add new link</span></td></tr></table>');
      $(this).append(item);
      fooCount += 1;
      foo();
    }
  }
});

＆＃13;

html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #2c2c2c;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJjMmMyYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM3JSIgc3RvcC1jb2xvcj0iIzNkM2QzZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iIzM1MzUzNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iIzM1MzUzNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMzEzMTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #2c2c2c), color-stop(37%, #3d3d3d), color-stop(66%, #353535), color-stop(66%, #353535), color-stop(100%, #131313));
  background: -webkit-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
  background: -o-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
  background: -ms-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
  background: linear-gradient(to right, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c2c2c', endColorstr='#131313', GradientType=1);
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  color: #b8c0c8;
  background: rgba(0, 0, 0, 0.3);
}

#leftDiv {
  display: inline-block;
  width: 15%;
  height: 100%;
  border-right: 3px solid rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  float: left;
  margin: 0;
  padding: 0;
  overflow: auto;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.33);
}

#deviceInfo {
  min-height: auto;
  border-bottom: 3px solid rgba(0, 0, 0, 0.2);
  padding: 3px;
  resize: vertical;
  overflow: auto;
}

#menu {
  padding: 0;
  margin: 0;
  margin-bottom: 5px;
  list-style-type: none;
}

#menu li {
  list-style: none;
  padding: 2px;
  border-radius: 4px;
  margin-top: 1px;
}

#menu li span {
  display: block;
  width: 100%;
  min-height: 20px;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26);
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26);
  cursor: pointer;
}

#menu li ul {
  padding: 0;
  list-style-type: none;
  overflow: hidden;
}

#menu li ul li {
  width: 100%;
  max-width: 250px;
  text-align: center;
  min-height: 20px;
  line-height: 20px;
  margin: auto;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  cursor: move;
}

#menu li ul li:first-child {
  margin-top: 2px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

#menu li ul li:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom: none;
}

#settingsDiv {
  margin: 0;
  width: 100%;
  min-height: 10px;
  box-sizing: border-box;
  margin: 0;
  padding: 3px;
  overflow: auto;
}

#mainDiv {
  display: inline-block;
  width: 85%;
  min-height: 100%;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin: 0;
  overflow: auto;
  padding: 3px;
}

.foo {
  min-width: 250px;
  width: auto;
  text-align: center;
  min-height: 30px;
  border: 1px solid #515151;
  border-radius: 6px;
  position: absolute;
  padding: 0;
  overflow: hidden;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.33);
  box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
}

.thClass {
  display: block;
  min-width: 150px;
  width: 102%;
  margin-left: -3px;
  text-align: center;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26);
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26);
  margin-top: -2px;
  min-height: 30px;
  line-height: 30px;
  font-size: 19px;
  cursor: move;
}

.header {
  margin-left: 17px;
}

.tableBody {
  display: block;
  min-height: 25px;
  text-align: center;
  width: 102%;
  margin-left: -2px;
  cursor: default;
}

.foo tbody tr td {
  display: block;
  line-height: 25px;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.devInfo {
  max-height: 150px;
  overflow-y: auto !important;
}

#deviceName {
  position: relative;
}

#interface {
  position: relative;
}

#display {
  position: relative;
}

#output {
  position: relative;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<body>
  <div id="leftDiv">
    <div id="deviceInfo">
      <ul id="menu">
        <li>Device Name
          <ul id="deviceName">
            <li>
              item 1
            </li>
          </ul>
        </li>
        <li>Interface
          <ul id="interface">
            <li>
              item 2
            </li>
          </ul>
        </li>
        <li>Display
          <ul id="display">
            <li>
              item 3
            </li>
          </ul>
        </li>
        <li>Output
          <ul id="output">
            <li>
              item 4
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div id="settingsDiv">

    </div>
  </div>
  <div id="mainDiv">

  </div>

＆＃13;

Answer 1

css函数设置/清除内联样式。除非您的li元素具有内联position样式，否则该代码将无法清除position样式。

如果元素是继承位置或从样式表中获取，则可以通过{{1}设置新值（absolute，static等）来覆盖内联样式但是，不能将其设置为css。

无法使用jquery删除CSS`position`属性

1 个答案: