如何修复与可拖动 canvas 的碰撞？

Question

I am making a module for a cmyk color model. It's a simple program, but I need advice or solution on how to do it so that the balls are not draggable even outside the background. How should I do that?

My Code:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='modules/CMYK/style.css') }}">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(function(){
            $(".circle").draggable();
        })
    </script>

    <div class="background">
        <div class="circle color-circle-light cr-red"></div>
        <div class="circle color-circle-light cr-green"></div>
        <div class="circle color-circle-light cr-yellow"></div>
    </div>

Answer 1

You are looking for containment: "parent" .

 $(function() { $(".circle").draggable({ containment: "parent" }); })

 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div class="background"> <div class="circle color-circle-light cr-red">Div1</div> <div class="circle color-circle-light cr-green">Div2</div> <div class="circle color-circle-light cr-yellow">Div3</div> </div>