自定义可拖拽的父容器

/**
 * 可拖拽的父容器Layout,只需要将内容图片在xml布局文件中设置在父容器内即可
 * 1.主要利用ViewDragHelper这个类来实现拖拽
 * Created by CaiXi on 2016/8/23.
 */
public class DragLayout extends RelativeLayout{
    private ViewDragHelper mDragger;

    public DragLayout(Context context) {
        this(context, null);
    }

    public DragLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public DragLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mDragger = ViewDragHelper.create(this, 1.0f, new ViewDragHelper.Callback() {
            @Override
            public boolean tryCaptureView(View child, int pointerId) {
                return true;
            }

            @Override
            public int clampViewPositionHorizontal(View child, int left, int dx) {
                final int leftBound = getPaddingLeft();
                final int rightBound = getWidth() - child.getWidth() - leftBound;
                final int newLeft = Math.min(Math.max(left, leftBound), rightBound);
                return newLeft;
            }

            @Override
            public int clampViewPositionVertical(View child, int top, int dy) {
                final int topBound = getPaddingTop();
                final int bottomBound = getHeight() - child.getHeight();
                final int newTop = Math.min(Math.max(top, topBound), bottomBound);
                return newTop;
            }

            @Override
            public int getViewHorizontalDragRange(View child) {
                return getMeasuredWidth() - child.getMeasuredWidth();
            }

            @Override
            public int getViewVerticalDragRange(View child) {
                return getMeasuredHeight() - child.getMeasuredHeight();
            }

            @Override
            public void onViewReleased(View releasedChild, float xvel, float yvel) {
                moveToSide(releasedChild);
                invalidate();
            }
        });
    }

    private void moveToSide(View view) {
        float top = view.getTop();
        float bottom = getMeasuredHeight() - view.getBottom();
        float right = getMeasuredWidth() - view.getRight();
        float left = view.getLeft();
        //上下滑动
        if ((top < bottom ? top : bottom) / getMeasuredHeight() < (right < left ? right : left) / getMeasuredWidth()) {
            mDragger.settleCapturedViewAt(view.getLeft(), top < bottom ? 0 : getMeasuredHeight() - view.getMeasuredHeight());
        } else {
            //左右滑动
            mDragger.settleCapturedViewAt(left < right ? 0 : getMeasuredWidth() - view.getMeasuredWidth(), view.getTop());
        }
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return mDragger.shouldInterceptTouchEvent(ev);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        mDragger.processTouchEvent(event);
        return false;
    }

    @Override
    public void computeScroll() {
        if (mDragger.continueSettling(true)) {
            invalidate();
        }
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        for (int i = 0; i < getChildCount(); i++) {
            getChildAt(i).setClickable(true);
        }
    }
}

根布局必须为framelayout 才能实现随意拖动效果   


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自定义拖拽容器的移动样式,可以使用CSS的`dragover`和`dragenter`伪类,来改变拖拽容器的样式。具体实现可以参考以下代码示例: ```css /* 拖拽容器的默认样式 */ #container { border: 1px solid #ccc; padding: 10px; } /* 拖拽容器拖拽时的样式 */ #container.dragover { border: 2px dashed #aaa; background-color: #f5f5f5; } /* 拖拽容器中的元素被拖拽时的样式 */ #container .draggable.dragging { opacity: 0.5; cursor: move; } ``` 在上面的代码中,我们定义了三种不同状态下的样式: - 默认样式:拖拽容器的默认样式。 - 拖拽样式:当拖拽容器拖拽时触发的样式,使用了`dragover`伪类来定义。 - 元素拖拽样式:当拖拽容器中的元素被拖拽时触发的样式,使用了`.draggable.dragging`选择器来定义。 然后在JavaScript代码中,我们可以通过添加或移除`dragover`类来改变拖拽容器的样式,具体实现可以参考以下代码: ```javascript // 获取拖拽容器 const container = document.getElementById('container'); // 绑定dragover事件 container.addEventListener('dragover', function (event) { event.preventDefault(); // 添加dragover类 container.classList.add('dragover'); }); // 绑定dragleave事件 container.addEventListener('dragleave', function (event) { // 移除dragover类 container.classList.remove('dragover'); }); // 绑定drop事件 container.addEventListener('drop', function (event) { event.preventDefault(); // 移除dragover类 container.classList.remove('dragover'); // 获取被拖拽元素的数据 const data = event.dataTransfer.getData('text/plain'); // 将元素移动到新位置 event.target.appendChild(document.getElementById(data)); }); ``` 在上面的代码中,我们添加了`dragover`和`dragleave`事件,通过添加或移除`dragover`类来改变拖拽容器的样式。同时,我们还绑定了drop事件,将元素移动到新的位置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值