在HTML和CSS中，可以使用draggable属性使元素可拖动，并使用JavaScript来保存可拖动元素的位置并将其他元素推开。以下是一个解决方法的示例代码：

HTML:

  

    可拖动元素
  
  

    其他元素
  
  

    其他元素
  

CSS:

#container {
  position: relative;
  width: 300px;
  height: 200px;
  border: 1px solid black;
  padding: 10px;
}

#draggable {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: blue;
  color: white;
  text-align: center;
  line-height: 100px;
  cursor: move;
}

.other-element {
  margin-top: 20px;
  height: 50px;
  background-color: gray;
  color: white;
  text-align: center;
  line-height: 50px;
}

JavaScript:

var draggableElement = document.getElementById('draggable');
var container = document.getElementById('container');
var offsetX, offsetY;

draggableElement.addEventListener('dragstart', function(e) {
  offsetX = e.clientX - draggableElement.getBoundingClientRect().left;
  offsetY = e.clientY - draggableElement.getBoundingClientRect().top;
});

container.addEventListener('dragover', function(e) {
  e.preventDefault();
});

container.addEventListener('drop', function(e) {
  e.preventDefault();
  var left = e.clientX - offsetX - container.getBoundingClientRect().left;
  var top = e.clientY - offsetY - container.getBoundingClientRect().top;
  draggableElement.style.left = left + 'px';
  draggableElement.style.top = top + 'px';
});

在上面的示例中，draggable元素具有draggable属性，使其可拖动。在dragstart事件中，我们保存了鼠标点击位置与元素左上角的偏移量，以便在drop事件中计算新的元素位置。container元素上的dragover事件和drop事件用于阻止默认行为并处理元素的拖放。

请注意，上述代码只是提供了一个基本的解决方案，并没有处理一些边界情况和性能优化。具体的实现可以根据实际需求进行修改和扩展。