@electerm/electerm-react 3.15.178 → 3.15.187

package/client/common/bookmark-schemas.js

@@ -99,6 +99,8 @@ export const serialBookmarkSchema = {
   xany: z.boolean().optional().describe('XANY flow control'),
   txLineEnding: z.enum(['\r', '\n', '\r\n']).optional().describe('TX line ending appended on Enter: "\\r" (CR, default), "\\n" (LF), "\\r\\n" (CR+LF)'),
   rxLineEnding: z.enum(['none', 'lf_to_crlf', 'cr_to_crlf']).optional().describe('RX line ending conversion: "none" (pass-through, default), "lf_to_crlf" (LF→CRLF for LF-only devices), "cr_to_crlf" (CR→CRLF for CR-only devices)'),
+  closeSequence: z.string().optional().describe('Key sequence sent to the serial port when the user clicks "exit gracefully" in the terminal controls (e.g. to cleanly exit GNU screen before disconnecting a Bluetooth serial console). Supports \\n \\t \\r \\\\ and \\xHH hex bytes, default "\\x01ky" (Ctrl+A, k, y - GNU screen kill-window confirm)'),
+  closeSequenceDelay: z.number().optional().describe('Milliseconds to wait after sending closeSequence before actually closing the port, default 500'),
   description: z.string().optional().describe('Bookmark description')
 }
 

package/client/common/default-setting.js

@@ -78,5 +78,6 @@ export default {
   startDirectoryLocal: '',
   allowMultiInstance: false,
   disableDeveloperTool: false,
-  dragDropBehavior: 'ask'
+  dragDropBehavior: 'ask',
+  switchTabOnHover: false
 }

package/client/common/drop-position.js

@@ -0,0 +1,59 @@
+/**
+ * Decide whether a dragged item should be inserted
+ * AFTER the drop target, based on which half of the
+ * target element the pointer is currently in.
+ *
+ * This is the fix for the "can not drag to the last
+ * position" bug: splitting each item into a top/bottom
+ * (or left/right) half gives a valid drop zone after the
+ * last item, so the insertion index can reach `length`
+ * (append) instead of being capped at `length - 1`.
+ *
+ * @param {Object} e         native drag event (needs clientX/clientY)
+ * @param {HTMLElement} el   resolved drop target element
+ * @param {boolean} horizontal  true for horizontal lists (e.g. tabs)
+ * @returns {boolean} true => insert the dragged item after the target
+ */
+export function isDropAfterHalf (e, el, horizontal = false) {
+  if (!el) {
+    return false
+  }
+  const rect = el.getBoundingClientRect()
+  if (!rect.height && !rect.width) {
+    return false
+  }
+  if (horizontal) {
+    return e.clientX > rect.left + rect.width / 2
+  }
+  return e.clientY > rect.top + rect.height / 2
+}
+
+const DROP_BEFORE_CLS = 'dnd-before'
+const DROP_AFTER_CLS = 'dnd-after'
+
+/**
+ * Show a directional drop indicator on the target element.
+ * first half  => top edge    (insert before)
+ * second half => bottom edge (insert after)
+ * Used together with the `.dnd-before` / `.dnd-after` CSS rules.
+ *
+ * @param {HTMLElement} el   resolved drop target element
+ * @param {boolean} insertAfter  result of isDropAfterHalf()
+ */
+export function setDropIndicator (el, insertAfter) {
+  if (!el) {
+    return
+  }
+  el.classList.remove(DROP_BEFORE_CLS, DROP_AFTER_CLS)
+  el.classList.add(insertAfter ? DROP_AFTER_CLS : DROP_BEFORE_CLS)
+}
+
+/**
+ * Remove any directional drop indicator from the target element.
+ */
+export function clearDropIndicator (el) {
+  if (!el) {
+    return
+  }
+  el.classList.remove(DROP_BEFORE_CLS, DROP_AFTER_CLS)
+}

package/client/components/bookmark-form/bookmark-schema.js

@@ -84,6 +84,8 @@ const bookmarkSchema = {
     xany: 'boolean - enable XANY flow control, default is false',
     txLineEnding: 'string - TX line ending on Enter: "\\r" (CR, default), "\\n" (LF), "\\r\\n" (CR+LF)',
     rxLineEnding: 'string - RX line ending conversion: "none" (default), "lf_to_crlf" (for LF-only devices), "cr_to_crlf" (for CR-only devices)',
+    closeSequence: 'string - key sequence sent to the serial port when the user clicks "exit gracefully" in the terminal controls, supports \\n \\t \\r \\\\ and \\xHH hex bytes, default "\\x01ky" (Ctrl+A, k, y - GNU screen kill-window confirm)',
+    closeSequenceDelay: 'number - ms to wait after sending closeSequence before closing the port, default 500',
     runScripts: 'array - run scripts after connected ({delay,script})',
     description: 'string - bookmark description'
   },

package/client/components/bookmark-form/common/connection-hopping.jsx

@@ -17,6 +17,7 @@ import {
   connectionHoppingWarnKey
 } from '../../../common/constants'
 import { useState, useRef, useCallback } from 'react'
+import { isDropAfterHalf } from '../../../common/drop-position'
 import ConnectionHoppingWarningText from '../../common/connection-hopping-warning-text'
 import * as ls from '../../../common/safe-local-storage'
 import Modal from '../../common/modal'
@@ -49,33 +50,56 @@ export default function renderConnectionHopping (props) {
   const [list, setList] = useState(formData.connectionHoppings || [])
   const dragItem = useRef(null)
   const dragOverItem = useRef(null)
+  // tracks whether the pointer is in the bottom half of the hovered row,
+  // so a drop can land after the target (including after the last row).
+  const dragOverAfter = useRef(false)
+  // { index, after } of the row currently hovered, or null. Drives the
+  // directional drop indicator on the antd table row via a className.
+  const [overRow, setOverRow] = useState(null)
 
   const handleDragStart = useCallback((index) => {
     dragItem.current = index
   }, [])
 
-  const handleDragEnter = useCallback((index) => {
+  // track target index + before/after half on every drag-over pass,
+  // because onDragEnter only fires once per row and cannot detect
+  // moving between the top and bottom half of the same row.
+  const handleDragOver = useCallback((e, index) => {
+    e.preventDefault()
+    const after = isDropAfterHalf(e, e.currentTarget)
     dragOverItem.current = index
+    dragOverAfter.current = after
+    setOverRow({ index, after })
   }, [])
 
   const handleDragEnd = useCallback(() => {
+    setOverRow(null)
     if (dragItem.current === null || dragOverItem.current === null) {
       return
     }
     if (dragItem.current === dragOverItem.current) {
       dragItem.current = null
       dragOverItem.current = null
+      dragOverAfter.current = false
       return
     }
     setList(old => {
       const newList = [...old]
-      const [removed] = newList.splice(dragItem.current, 1)
-      newList.splice(dragOverItem.current, 0, removed)
+      const fromIndex = dragItem.current
+      let insertIndex = dragOverAfter.current
+        ? dragOverItem.current + 1
+        : dragOverItem.current
+      const [removed] = newList.splice(fromIndex, 1)
+      if (fromIndex < insertIndex) {
+        insertIndex = insertIndex - 1
+      }
+      newList.splice(insertIndex, 0, removed)
       form.setFieldsValue({
         connectionHoppings: newList
       })
       dragItem.current = null
       dragOverItem.current = null
+      dragOverAfter.current = false
       return newList
     })
   }, [form])
@@ -205,15 +229,17 @@ export default function renderConnectionHopping (props) {
       <FormItem {...tailFormItemLayout}>
         <Table
           columns={cols}
-          className='mg3b'
+          className='mg3b connection-hopping-table'
           pagination={false}
           size='small'
           onRow={(record, index) => ({
             draggable: true,
+            className: overRow && overRow.index === index
+              ? (overRow.after ? 'dnd-after' : 'dnd-before')
+              : '',
             onDragStart: () => handleDragStart(index),
-            onDragEnter: () => handleDragEnter(index),
-            onDragEnd: handleDragEnd,
-            onDragOver: (e) => e.preventDefault()
+            onDragOver: (e) => handleDragOver(e, index),
+            onDragEnd: handleDragEnd
           })}
           dataSource={list.map((d, i) => {
             return {

package/client/components/bookmark-form/common/ssh-tunnel-form.jsx

@@ -32,10 +32,18 @@ export default function SshTunnelForm (props) {
   } = props
 
   const [isDynamic, setIsDynamic] = useState(
-    (initialValues?.sshTunnel || 'forwardRemoteToLocal') === 'dynamicForward'
+    (initialValues?.sshTunnel || 'forwardLocalToRemote') === 'dynamicForward'
   )
   const [dirty, setDirty] = useState(false)
 
+  // watch host/port fields so the tooltip examples reflect what the user typed
+  const localHost = Form.useWatch('sshTunnelLocalHost', formChild) || '127.0.0.1'
+  const localPort = Form.useWatch('sshTunnelLocalPort', formChild) || '12200'
+  const remoteHost = Form.useWatch('sshTunnelRemoteHost', formChild) || '127.0.0.1'
+  const remotePort = Form.useWatch('sshTunnelRemotePort', formChild) || '12300'
+  const localAddr = `${localHost}:${localPort}`
+  const remoteAddr = `${remoteHost}:${remotePort}`
+
   function onChange (ev) {
     setIsDynamic(ev.target.value === 'dynamicForward')
   }
@@ -63,13 +71,23 @@ export default function SshTunnelForm (props) {
       <div>
         <p>{e(direction)}</p>
         <p><UserOutlined /> → {middle} → {last}</p>
+        {localToRemote
+          ? (
+            <p>Connect to <b>{localAddr}</b> on your machine to reach <b>{remoteAddr}</b> on the remote server (e.g. open <b>http://{localAddr}</b> in a browser).</p>
+            )
+          : (
+            <p>Connect to <b>{remoteAddr}</b> on the remote server to reach <b>{localAddr}</b> on your machine.</p>
+            )}
       </div>
     )
   }
 
   function renderDynamicForward () {
     return (
-      <p><UserOutlined /> → socks proxy → url</p>
+      <div>
+        <p><UserOutlined /> → socks proxy → url</p>
+        <p>Point your app's SOCKS5 proxy at <b>{localAddr}</b> to reach any host through the remote server.</p>
+      </div>
     )
   }
 
@@ -125,16 +143,16 @@ export default function SshTunnelForm (props) {
         required
       >
         <RadioGroup onChange={onChange}>
-          <RadioButton value='forwardRemoteToLocal'>
-            <Tooltip title={renderSshTunnelFlow('remoteToLocal')}>
-              <span>R→L <QuestionCircleOutlined /></span>
-            </Tooltip>
-          </RadioButton>
           <RadioButton value='forwardLocalToRemote'>
             <Tooltip title={renderSshTunnelFlow('localToRemote')}>
               <span>L→R <QuestionCircleOutlined /></span>
             </Tooltip>
           </RadioButton>
+          <RadioButton value='forwardRemoteToLocal'>
+            <Tooltip title={renderSshTunnelFlow('remoteToLocal')}>
+              <span>R→L <QuestionCircleOutlined /></span>
+            </Tooltip>
+          </RadioButton>
           <RadioButton value='dynamicForward'>
             <Tooltip title={renderDynamicForward()}>
               <span>{e('dynamicForward')}(socks proxy) <QuestionCircleOutlined /></span>

package/client/components/bookmark-form/common/ssh-tunnels.jsx

@@ -14,7 +14,7 @@ const FormItem = Form.Item
 const e = window.translate
 
 const defaultInitialValues = {
-  sshTunnel: 'forwardRemoteToLocal',
+  sshTunnel: 'forwardLocalToRemote',
   sshTunnelLocalPort: 12200,
   sshTunnelLocalHost: '127.0.0.1',
   sshTunnelRemotePort: 12300,

package/client/components/bookmark-form/config/serial.js

@@ -20,6 +20,8 @@ const serialConfig = {
       xon: false,
       xoff: false,
       xany: false,
+      closeSequence: '\\x01ky',
+      closeSequenceDelay: 500,
       term: defaultSettings.terminalType,
       displayRaw: false,
       runScripts: [{}],
@@ -59,6 +61,18 @@ const serialConfig = {
         { type: 'switch', name: 'xany', label: 'xany', valuePropName: 'checked' },
         { type: 'select', name: 'txLineEnding', label: 'txLineEnding', options: commonTxLineEndings.map(d => ({ value: d.value, label: d.label })) },
         { type: 'select', name: 'rxLineEnding', label: 'rxLineEnding', options: commonRxLineEndings.map(d => ({ value: d.value, label: d.label })) },
+        {
+          type: 'input',
+          name: 'closeSequence',
+          label: e('closeSequence'),
+          props: { placeholder: '\\x01ky' }
+        },
+        {
+          type: 'number',
+          name: 'closeSequenceDelay',
+          label: e('closeSequenceDelay'),
+          props: { min: 0, max: 10000, step: 100 }
+        },
         commonFields.runScripts,
         commonFields.description,
         { type: 'input', name: 'type', label: 'type', hidden: true }

package/client/components/quick-commands/on-drop.js

@@ -1,8 +1,13 @@
+import { isDropAfterHalf } from '../../common/drop-position'
+
 export default function onDrop (e, cls) {
   e.preventDefault()
   const { store } = window
   const idDragged = e.dataTransfer.getData('idDragged')
   const tar = cls ? e.target.closest(cls) : e.target
   const idDrop = tar.getAttribute('data-id')
-  store.adjustOrder('quickCommands', idDragged, idDrop)
+  // drop on the bottom half of the target => insert after it,
+  // which makes dropping on the last item append to the end.
+  const insertAfter = isDropAfterHalf(e, tar)
+  store.adjustOrder('quickCommands', idDragged, idDrop, insertAfter)
 }

package/client/components/quick-commands/quick-commands-box.jsx

@@ -15,6 +15,7 @@ import {
 } from '@ant-design/icons'
 import classNames from 'classnames'
 import onDropFunc from './on-drop'
+import { isDropAfterHalf, setDropIndicator, clearDropIndicator } from '../../common/drop-position'
 import './qm.styl'
 
 const e = window.translate
@@ -81,6 +82,10 @@ export default function QuickCommandsFooterBox (props) {
 
   function onDragOver (e) {
     e.preventDefault()
+    const el = e.target.closest('.qm-item')
+    if (el) {
+      setDropIndicator(el, isDropAfterHalf(e, el))
+    }
   }
 
   function onDragStart (e) {
@@ -88,14 +93,25 @@ export default function QuickCommandsFooterBox (props) {
   }
 
   function onDragEnter (e) {
-    e.target.closest('.qm-item')?.classList.add('qm-item-dragover')
+    e.preventDefault()
+    const el = e.target.closest('.qm-item')
+    if (el) {
+      setDropIndicator(el, isDropAfterHalf(e, el))
+    }
   }
 
   function onDragLeave (e) {
-    e.target.closest('.qm-item')?.classList.remove('qm-item-dragover')
+    const el = e.target.closest('.qm-item')
+    if (el) {
+      clearDropIndicator(el)
+    }
   }
 
   function onDrop (e) {
+    const el = e.target.closest('.qm-item')
+    if (el) {
+      clearDropIndicator(el)
+    }
     onDropFunc(e, '.qm-item')
   }
 

package/client/components/quick-commands/quick-commands-list-form.jsx

@@ -8,6 +8,7 @@ import {
 import { MinusCircleOutlined, PlusOutlined, HolderOutlined } from '@ant-design/icons'
 import HelpIcon from '../common/help-icon'
 import { copy } from '../../common/clipboard'
+import { isDropAfterHalf, setDropIndicator, clearDropIndicator } from '../../common/drop-position'
 import { useRef } from 'react'
 
 const FormItem = Form.Item
@@ -30,28 +31,38 @@ export default function renderQm (form) {
     e.dataTransfer.dropEffect = 'move'
     const el = e.target.closest('.ant-space-compact')
     if (dragIndexRef.current !== index && el) {
-      el.classList.add('qm-field-dragover')
+      setDropIndicator(el, isDropAfterHalf(e, el))
     }
   }
 
   function handleDragLeave (e) {
-    e.target.closest('.ant-space-compact')?.classList.remove('qm-field-dragover')
+    const el = e.target.closest('.ant-space-compact')
+    if (el) {
+      clearDropIndicator(el)
+    }
   }
 
   function handleDrop (e, index, form) {
     e.preventDefault()
     const el = e.target.closest('.ant-space-compact')
-    el?.classList.remove('qm-field-dragover')
+    clearDropIndicator(el)
     const dragIndex = dragIndexRef.current
     if (dragIndex === null || dragIndex === index) {
       dragIndexRef.current = null
       return
     }
+    // bottom half of the row => insert after it, so the last
+    // sub-command can receive a drop (append to the end).
+    const insertAfter = isDropAfterHalf(e, el)
     const commands = form.getFieldValue('commands') || []
     const item = commands[dragIndex]
     const newCommands = [...commands]
     newCommands.splice(dragIndex, 1)
-    newCommands.splice(index, 0, item)
+    let insertIndex = insertAfter ? index + 1 : index
+    if (dragIndex < insertIndex) {
+      insertIndex = insertIndex - 1
+    }
+    newCommands.splice(insertIndex, 0, item)
     form.setFieldValue('commands', newCommands)
     dragIndexRef.current = null
   }

package/client/components/quick-commands/quick-commands-list.jsx

@@ -9,6 +9,7 @@ import classnames from 'classnames'
 import highlight from '../common/highlight'
 import QmTransport from './quick-command-transport'
 import onDrop from './on-drop'
+import { isDropAfterHalf, setDropIndicator, clearDropIndicator } from '../../common/drop-position'
 import copy from 'json-deep-copy'
 import uid from '../../common/uid'
 
@@ -37,6 +38,10 @@ export default class QuickCommandsList extends List {
 
   handleDragOver = e => {
     e.preventDefault()
+    const el = e.target.closest('.item-list-unit')
+    if (el) {
+      setDropIndicator(el, isDropAfterHalf(e, el))
+    }
   }
 
   handleDragStart = e => {
@@ -47,14 +52,25 @@ export default class QuickCommandsList extends List {
   }
 
   handleDragEnter = e => {
-    e.target.closest('.item-list-unit').classList.add('qm-field-dragover')
+    e.preventDefault()
+    const el = e.target.closest('.item-list-unit')
+    if (el) {
+      setDropIndicator(el, isDropAfterHalf(e, el))
+    }
   }
 
   handleDragLeave = e => {
-    e.target.closest('.item-list-unit').classList.remove('qm-field-dragover')
+    const el = e.target.closest('.item-list-unit')
+    if (el) {
+      clearDropIndicator(el)
+    }
   }
 
   handleDrop = e => {
+    const el = e.target.closest('.item-list-unit')
+    if (el) {
+      clearDropIndicator(el)
+    }
     onDrop(e, '.item-list-unit')
   }
 

package/client/components/session/session-control.jsx

@@ -9,13 +9,15 @@ import {
   CloseOutlined,
   ApartmentOutlined,
   MoreOutlined,
-  ColumnWidthOutlined
+  ColumnWidthOutlined,
+  LogoutOutlined
 } from '@ant-design/icons'
 import { Tooltip, Popover } from 'antd'
 import classnames from 'classnames'
 import {
   paneMap,
-  connectionMap
+  connectionMap,
+  terminalSerialType
 } from '../../common/constants'
 import { SplitViewIcon } from '../icons/split-view'
 import { HeartbeatIcon } from '../icons/heartbeat'
@@ -45,13 +47,18 @@ export default function SessionControl (props) {
     toggleWrap,
     onFullscreen,
     onOpenSearch,
-    onDismissDelKeyTip
+    onDismissDelKeyTip,
+    onExitGracefully
   } = props
 
   if (isNotTerminalType) {
     return null
   }
 
+  const isSsh = !!tab.authType
+  const isLocal = !isSsh && (tab.type === connectionMap.local || !tab.type)
+  const showSshFeatures = isSsh || isLocal
+
   // ---- sub-renderers ----
 
   function renderPaneControl () {
@@ -62,9 +69,6 @@ export default function SessionControl (props) {
     if (sshSftpSplitView && canSplitView) {
       return null
     }
-    const termType = tab?.type
-    const isSsh = tab.authType
-    const isLocal = !isSsh && (termType === connectionMap.local || !termType)
     const types = [
       paneMap.terminal,
       paneMap.fileManager
@@ -124,9 +128,6 @@ export default function SessionControl (props) {
       return null
     }
     const { pane, enableSsh, sshSftpSplitView } = tab
-    const termType = tab?.type
-    const isSsh = tab.authType
-    const isLocal = !isSsh && (termType === connectionMap.local || !termType)
     const checkTxt = e('sftpPathFollowSsh')
     const checkProps = {
       onClick: toggleCheckSftpPathFollowSsh,
@@ -161,7 +162,7 @@ export default function SessionControl (props) {
     if (isMobile) {
       return null
     }
-    if (!canSplitView || isNotTerminalType) {
+    if (!canSplitView || isNotTerminalType || !showSshFeatures) {
       return null
     }
     const title = e('sshSftpSplitView')
@@ -185,7 +186,7 @@ export default function SessionControl (props) {
   }
 
   function renderKeepaliveIcon () {
-    if (isSshDisabled) {
+    if (isSshDisabled || !showSshFeatures) {
       return null
     }
     const title = e('keepalive')
@@ -203,7 +204,7 @@ export default function SessionControl (props) {
   }
 
   function renderBroadcastIcon () {
-    if (isSshDisabled) {
+    if (isSshDisabled || !showSshFeatures) {
       return null
     }
     const title = e('broadcastInput')
@@ -235,6 +236,21 @@ export default function SessionControl (props) {
     )
   }
 
+  function renderExitGracefullyIcon () {
+    if (tab.type !== terminalSerialType) {
+      return null
+    }
+    const title = e('exitGracefully')
+    return (
+      <Tooltip title={title}>
+        <LogoutOutlined
+          className='sess-icon pointer exit-gracefully-icon'
+          onClick={onExitGracefully}
+        />
+      </Tooltip>
+    )
+  }
+
   function renderSearchIcon () {
     const title = e('search')
     return (
@@ -281,6 +297,7 @@ export default function SessionControl (props) {
         {renderKeepaliveIcon()}
         {renderBroadcastIcon()}
         {renderWrapIcon()}
+        {renderExitGracefullyIcon()}
         {renderTermControls()}
       </div>
     )
@@ -307,6 +324,7 @@ export default function SessionControl (props) {
       {renderKeepaliveIcon()}
       {renderBroadcastIcon()}
       {renderWrapIcon()}
+      {renderExitGracefullyIcon()}
       {renderTermControls()}
     </div>
   )

package/client/components/session/session.jsx

@@ -490,6 +490,10 @@ export default class SessionWrapper extends Component {
     this.setState({ keepaliveEnabled: enabled })
   }
 
+  handleExitGracefully = () => {
+    refs.get('term-' + this.props.tab.id)?.exitGracefully()
+  }
+
   handleOpenSearch = () => {
     refs.get('term-' + this.props.tab.id)?.toggleSearch()
   }
@@ -640,6 +644,7 @@ export default class SessionWrapper extends Component {
           onFullscreen={this.handleFullscreen}
           onOpenSearch={this.handleOpenSearch}
           onDismissDelKeyTip={this.handleDismissDelKeyTip}
+          onExitGracefully={this.handleExitGracefully}
         />
         {this.renderViews()}
       </div>

package/client/components/setting-panel/setting-common.jsx

@@ -603,6 +603,7 @@ export default class SettingCommon extends Component {
             'hideIP',
             'allowMultiInstance',
             'disableDeveloperTool',
+            'switchTabOnHover',
             'debug'
           ].map(this.renderToggle)
         }

package/client/components/sftp/address-bookmark-item.jsx

@@ -5,6 +5,7 @@ import {
 import {
   Tag
 } from 'antd'
+import { isDropAfterHalf, setDropIndicator, clearDropIndicator } from '../../common/drop-position'
 
 export default class AddrBookmarkItem extends Component {
   handleClick = () => {
@@ -31,6 +32,15 @@ export default class AddrBookmarkItem extends Component {
 
   handleDragOver = e => {
     e.preventDefault()
+    // only the hovered item should show an indicator
+    document.querySelectorAll(
+      '.addr-bookmark-item.dnd-before, .addr-bookmark-item.dnd-after'
+    ).forEach(el => clearDropIndicator(el))
+    setDropIndicator(e.currentTarget, isDropAfterHalf(e, e.currentTarget))
+  }
+
+  handleDragLeave = e => {
+    clearDropIndicator(e.currentTarget)
   }
 
   handleDragStart = e => {
@@ -39,13 +49,15 @@ export default class AddrBookmarkItem extends Component {
 
   handleDrop = e => {
     e.preventDefault()
+    clearDropIndicator(e.currentTarget)
     const { store } = window
     const [host, idDragged] = e.dataTransfer.getData('idDragged').split('#')
-    const idDrop = e.target.getAttribute('data-id').split('#')[1]
+    const idDrop = e.currentTarget.getAttribute('data-id').split('#')[1]
     const dataName = host
       ? 'addressBookmarks'
       : 'addressBookmarksLocal'
-    store.adjustOrder(dataName, idDragged, idDrop)
+    const insertAfter = isDropAfterHalf(e, e.currentTarget)
+    store.adjustOrder(dataName, idDragged, idDrop, insertAfter)
   }
 
   render () {
@@ -64,6 +76,7 @@ export default class AddrBookmarkItem extends Component {
         data-id={id}
         draggable
         onDragOver={this.handleDragOver}
+        onDragLeave={this.handleDragLeave}
         onDragStart={this.handleDragStart}
         onDrop={this.handleDrop}
       >