粘性 jQuery 对话框

Question

我正在使用 jQuery UI 创建一个对话框。我正在尝试将其粘贴在 Visual Studio 中。您可以通过拖动到您想要的位置来选择将其固定的位置。

有这样的javascript库吗？如果没有，我应该从哪里开始？

谢谢

Answer 1

您可以使用下面的示例模拟可拖动的工具栏和可放置的停靠栏。

我使用以下文档构建了以下示例：

• https://jqueryui.com/draggable/
• https://jqueryui.com/droppable/
• https://api.jqueryui.com/theming/css-framework/

为了调整和恢复原始工具栏大小，我只是将值存储为数据。

$(function() {
  $('.toolbar').draggable({
    snap: '.dock'
  });

  $('.dock').droppable({
    accept: '.toolbar',
    classes: {
      'ui-droppable-active': 'ui-state-active',
      'ui-droppable-hover': 'ui-state-hover'
    },
    drop: function(event, ui) {
      let $dock = $(this), $toolbar = ui.draggable;
      $toolbar.data({
        'original-width': $toolbar.width(),
        'original-height': $toolbar.height()
      });
      let dockGutter = ($dock.outerWidth() - $dock.innerWidth()) / 2;
      let dockOffset = $dock.offset();
      $toolbar.offset($.extend(dockOffset, {
        top: dockOffset.top + dockGutter,
        left: dockOffset.left + dockGutter,
      }));
      $toolbar.width($dock.width());
      $toolbar.height($dock.height());
    },
    out: function(e, ui) {
      let $toolbar = ui.draggable;
      $toolbar.width($toolbar.data('original-width'));
      $toolbar.height($toolbar.data('original-height'));
    }
  });
});

.dock {
  height: 120px;
  padding: 0;
  margin-bottom: 1em;
  text-align: center;
  line-height: 120px;
}

.toolbar {
  width: 300px;
  height: 80px;
  display: flex;
  flex-direction: column;
}

.toolbar.ui-widget .ui-widget-header {
  padding: 0.25em;
}

.toolbar.ui-widget .ui-widget-content {
  padding: 0.5em 0.25em;
  flex: 1;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/theme.min.css" />

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="ui-widget-content dock">
  <em>Empty dock&hellip;</em>
</div>

<div id="output-widget" class="toolbar ui-widget">
  <div class="ui-widget-header">Output</div>
  <div class="ui-widget-content">
    Show output from:
    <select>
      <option>IntelliSense</option>
    </select>
  </div>
</div>

多个码头

这是一个带有四个可放置区域的边框布局的面板示例。确保最大化结果以获得最佳结果。

注意：点击“显示代码sn-p”，点击“运行代码sn-p”，然后点击“整页”。

$(function() {
  $('.toolbar').draggable({
    //snap: '.dock',
    start: function() {},
    drag: function() {},
    stop: function() {}
  });

  $('.dock').droppable({
    accept: '.toolbar',
    classes: {
      'ui-droppable-active': 'ui-state-active',
      'ui-droppable-hover': 'ui-state-hover'
    },
    drop: function(event, ui) {
      let $dock = $(this), $toolbar = ui.draggable;
      $toolbar.data({
        'original-width': $toolbar.width(),
        'original-height': $toolbar.height()
      });
      let dockGutter = ($dock.outerWidth() - $dock.innerWidth()) / 2;
      let dockOffset = $dock.offset();
      $toolbar.offset($.extend(dockOffset, {
        top: dockOffset.top + dockGutter,
        left: dockOffset.left + dockGutter,
      }));
      $toolbar.width($dock.width());
      $toolbar.height($dock.height());
    },
    out: function(e, ui) {
      let $toolbar = ui.draggable;
      $toolbar.width($toolbar.data('original-width'));
      $toolbar.height($toolbar.data('original-height'));
    }
  });
});

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1;
  width: calc(100% - 1px);
  height: calc(100% - 2px);
}

.panel-content {
  display: flex;
  align-items: stretch;
  flex: auto;
}

.panel-header,
.panel-footer {
  height: 25%;
}

.dock {
  display: flex;
  height: 100%;
}

.dock-west,
.dock-east {
  width: 25%;
}

.workspace {
  display: flex;
  align-items: stretch;
  flex: auto;
}

.toolbar {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 300px;
  height: 80px;
  display: flex;
  flex-direction: column;
}

.toolbar.ui-widget .ui-widget-header {
  padding: 0.25em;
}

.toolbar.ui-widget .ui-widget-content {
  padding: 0.5em 0.25em;
  flex: 1;
}

.ui-draggable-dragging {
  cursor: move;
}

/* Flipped hover style (blue) */
.dock.ui-state-active {
  border-color: #59b4d4;
  background-color: #0078a3;
  background-image:url("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/images/ui-bg_glass_40_0078a3_1x400.png");  
}

/* Flipped active style (orange) */
.dock.ui-state-hover {
  border-color: #ffaf0f;
  background-color: #f58400;
  background-image: url("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/images/ui-bg_inset-soft_30_f58400_1x100.png");
}

/* Reason: https://bugs.jqueryui.com/ticket/6799 */
.ui-state-hover.ui-state-active {
  border-color: #ffaf0f;
  background-color: #f58400;
  background-image: url("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/images/ui-bg_inset-soft_30_f58400_1x100.png");
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/theme.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="panel">
  <div class="panel-header">
    <div class="ui-widget-content dock dock-north">North</div>
  </div>
  <div class="panel-content">
    <div class="ui-widget-content dock dock-west">West</div>
    <div class="ui-widget-content workspace">Center</div>
    <div class="ui-widget-content dock dock-east">East</div>
  </div>
  <div class="panel-footer">
    <div class="ui-widget-content dock dock-south">South</div>
  </div>
</div>

<div id="output-widget" class="toolbar ui-widget">
  <div class="ui-widget-header">Output</div>
  <div class="ui-widget-content">
    Show output from:
    <select>
      <option>IntelliSense</option>
    </select>
  </div>
</div>